响应式Web设计:HTML5和CSS3实战(第2版)
第一章 响应式Web设计基础
1.1 定义需求
- 响应式设计可以让一个网站同时适配多种设备和屏幕
- 并不依赖服务端或后端方案
1.2 响应式设计
- 定义：网页内容会随着访问它的视口及设备的不同而呈现不同的样式
- 思路：先为小屏幕设计内容、样式，然后再向大屏幕扩展
1.3 浏览器支持
- 先写一个较轻量的代码结构，然后根据所需的体验针对能力更强的浏览器进行扩展
- 视觉
- 功能
- 渐进增强
- 从最基本体验开始，逐步扩充
- 平稳退化
- 先做出大而全的版本，然后再针对能力不足的平台寻找后备方案
- 提前确定主要支持平台很重要
- 推荐网站：www.caniuse.com
1.4 响应式例子
1.4.1 html
- 默认情况下网页布局上弹性的，缩放浏览器窗口，文字会自动重排
- iphone会将网页按980px宽度渲染，然后缩放到视口（viewport）中
<meta name="viewport" content="width = device-width">
1.4.2 picture
- 图片宽度按容器宽度自动缩放
img {
max-width: 100%;
}
- width:100%
- 会导致图片永远都占满容器，不考虑图片本身宽度
1.4.3 媒体查询
- 断点应该由内容和设计本身决定， 不应该由流行的主流设备宽高设置
- 表现形式：
- @media screen and (max-width: 50em);
- 只适合宽度在50em以下的情况下
- 以最小屏幕为起点，再根据需求渐进扩展视觉和功能
