读书总结《响应式Web设计：HTML5和CSS3实战》
2019-08-25 本文已影响0人
简栋梁
1、灵活网格
全部用相对单位，将设计稿中的绝对单位通过公式 “目标 / 上下文 = 结果” 转换为相对单位，而且结果应该尽可能保留小数点，让浏览器自己算，追求精确。
2、灵活图像
（1）max-width将图片缩小至灵活容器
- 为图片设置灵活容器，用max-width:100%防止图片超出容器。
- 为了兼容ie6-，应该用width:100%，但是这会使固有尺寸过小的图片强行放大，应该多设置一些类来筛选哪些图片才是真正有需求。
（2）overflow:hidden直接隐藏多出的部分
3、媒体查询
（1）<link>里的media属性
<link ... media="screen and (min-width=1024px)">
（2）通过@media分类打包
@media screen and (min-width=1024px){
// 相应的规则
}
（3）@import导入
// and (...)这部分是CSS3才加入的。
@import url(...) screen and (min-width=1024px)
4、准备工作
// 设置视口宽度为屏幕宽度，默认浏览器比例100%
<meta name="viewport" content="initial-scale=1.0 width=device-width">
5、媒体查询的各设备功能条件用and连接，但不是所有设备浏览器都支持全部条件
6、对于ie8-兼容性问题，可以导入js插件让其兼容媒体查询，如css3-mediaqueries.js，但需要在每个媒体查询体后加入注释 /* /mediaquery */
7、响应式这东西是看需求的
（1）什么程度的响应式
（2）是否要根据设备、使用环境等因素来衍生出另一个HTML结构
（3）什么类型的网站才适合响应式
适合的网站类型：品牌宣传网站、行业协会信息门户、视频图片演示网站
（4）一般大公司不需要考虑响应式，会直接做双主页，为了在不同设备上达到更好的用户体验
8、移动优先原则
先做移动端，再做桌面端，由简到繁，使得更注重于用户的核心需求。同时，也可以解决部分浏览器对媒体查询、JS支持差的情况（桌面端基本都没什么问题，将基本样式设置到容易出问题的一方）
9、响应式加载JS
10、一句话，响应式不是为了取代移动端页面而诞生的
总结
1、响应式布局三大部分：
（1）<meta>的视口初始配置
（2）灵活比例缩放
（3）媒体查询
