响应式 - 基础篇

简介: 响应式 - 基础篇


Ps:因为“only”在老的浏览器里识别不到,所以第一段最终为false。

Ps:以上属性都可以添加 min- 或 max- 前缀。

px & em & rem

Ps:em 所谓的相对于父元素是一直在找父元素,直到找到为止。

注意事项

1、自适应原则:宽度百分比(%),高度定死(px),图片等比缩放等。

2、一般情况class命名“-”的形式,id命名首字母小写其他单词首字母大写的驼峰命名法。

3、line-height 不推荐使用 rem,因为在谷歌中文浏览器下会有一个下限的原因,使得 1rem = 12px,而不是 1rem = 10px(前提是 font-size: 62.5%)。

4、把所有尽可能的小图片(图标)放在一个大图里,只要通过截图的css获取即可,为了减少网络请求。

5、每个

之间会有个制表符,使得会有个细小的间隙(放大加背景可明显看见),解决方案百度。

6、媒体查询不是相对于 html 的 font-size,而是相对于浏览器本身。

7、响应式图片:js、服务端、srcset、sizes、picture、svg。【推荐:picture + picturefill.js 兼容库】

8、IE兼容性:Respond、html5shiv

9、Normalize.css

目录
相关文章
|
机器学习/深度学习 传感器 自动驾驶
基于深度学习的图像识别技术在自动驾驶系统中的应用
【5月更文挑战第2天】 随着人工智能技术的飞速发展,深度学习已经成为推动多个科技领域进步的关键力量。特别是在图像识别技术方面,深度学习的应用已经极大地改善了算法的准确性和效率。本文将探讨深度学习在图像识别中的核心机制,并重点分析其在自动驾驶系统中的具体应用,包括车辆检测、行人识别以及交通标志识别等关键技术点。通过综合现有研究成果与最新技术动态,本文旨在为读者提供一个关于如何利用深度学习提升自动驾驶系统性能的全面视角。
127 4
SAP RETAIL 初阶之WA52 Allocation Rule List
SAP RETAIL 初阶之WA52 Allocation Rule List
SAP RETAIL 初阶之WA52 Allocation Rule List
|
开发工具 git
Git - 时光机穿梭之管理修改
Git - 时光机穿梭之管理修改
111 0
|
编解码 监控
|
Java 开发工具 数据库
|
4天前
|
人工智能 运维 安全
|
2天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!