一. 响应式布局:
响应式优缺点:
- 优点: 节省时间,减少工作量,每个设备都得到正确的设计,搜索优化...
- 缺点: 加载更多的样式和脚本资源,设计较难的的精确控制,老版本兼容性不好...
响应式网站设计实践原则:
- 渐进增强
- 优雅降级
主要知识点:
- @media
- 响应式单位 rem
- picture 响应式图片
网站
二. @media
媒体查询
- 查询符 not、and、or、only
- not: 有效范围到","
- and: 全部符合
- or: 符合其中一个,等同","
- only: 防止老旧的浏览器,不支持带媒体属性的查询
设置viewport视口
<meta view="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
@media
@media only screen and (max-width:30em;) 1em = 1rem = 16px; @media级别不在html之下
常用断点:
- 超大屏PC 1200/1170 pc/平板横屏 980 平板 768 平板竖屏/手机横屏 480 手机 320 手机 0
5. Css Resets
* 每个浏览器特定标签的解释都有差异
* reset.css: 重置浏览器的css默认样式,浏览器的品种不同样式不同,然后重置,让他们统一
* normalize.css: 保留有用的浏览器默认样式,而不是一概的将它们抹杀,normalize.css作用在范围更广的元素上面,修正了一些bug及主流浏览器在渲染上的不一致
三. 三个单位px,em,rem
- px
1px相当于1像素
- em
参照物为父元素的font-size;
em具有继承的特点;
没有参照物时,浏览器会默认设置: 1em = 16px;
- rem
参照物为 根元素html,固定不变
没有设置font-size时,默认设置: 1rem = 16px;
html{font-size: 62.5%;} 1rem = 62.5%^16px=10px;
四. picture响应式图片
<picture>
<source srcset="img/ad001-l.png" media = "(min-width:50em)">
<source srcset="img/ad001-m.png" media = "(min-width:30em)">
<img src="img/ad001.png">
</picture>
五. 兼容性
@media
不支持ie9及以下,要用respond.js
https://blog.csdn.net/jeft_hai/article/details/82317780;
picture
引入picturefill,(polyfill)
<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.js"></script>