响应式Web设计:HTML5和CSS3实战(第2版)
第二章 媒体查询
- 除了IE8及以下，主流浏览器都支持媒体查询
2.1 为什么响应式需要媒体查询
- 届时，css并不支持真正的条件逻辑和可编程特性
推荐书目
- 《Sass和Compass设计师指南》
2.2 媒体查询的语法
- 在css中使用：
img {
@media screen and (max-width: 50em);
}
- 在link中使用：
<link rel="stylesheet" type="text/css" media="screen and (orientation: portrait)" href="example.css">
2.3 组合媒体查询
- 串在一起
<link rel="stylesheet" type="text/css" media="screen and (orientation: portrait) and (max-width: 320px), projection" href="example.css">- 逗号分隔每个媒体查询表达式
2.3.1 省略screen
- 不指定关键字，则默认是all，包括screen
2.3.2 媒体查询可以侦测的特性
- 较常用：
| 特性 | 解释 |
|---|---|
| width | 视口宽度 |
| height | 视口高度 |
| device-width | 渲染表面的宽度（即屏幕宽度） |
| device-height | 渲染表面的高度（即屏幕高度） |
| orientation | 设备方向是垂直还是水平 |
| aspect-ratio | 视口宽高比 |
| grid | 设备基于栅格还是位图 |
| resolution | 屏幕或打印分辨率 |
2.4 通过媒体查询修改设计
2.4.1 任何css都可以放在媒查内
2.4.2 针对高分辨率设备的媒查
@media (min-resolution: 2dppx) { ... }
2.5 注意事项
2.5.1 使用媒查链接不同css文件
@import url("iphone.css") screen and (max-width: 680px);- css属于阻塞型内容，浏览器需要下载和解析，然后再渲染页面
- 不符合媒查的css文件被“延缓执行”，到页面加载后再处理（并非不下载）
- 所有文件都被下载后，如果有的文件不必立即使用，浏览器就不会让它影响页面渲染
- 如，下载了6个css文件，在渲染爷面前，只解析针对当前视口大小的样式表
2.5.2 初步页面性能优化
- 性能优化漫谈：
- 所有图片都经过了压缩
- 所有脚本都拼接并缩短了
- 所有资源都采用了gzip压缩
- 所有静态资源都缓存到了CDN
- 所有多余的css规则都被清除了
2.5.3 媒查适合写在css表中
2.6 组合媒查 vs 分块摆放
- 分散放（推荐）
.thing {
width: 50%;
}
@media (min-width: 30rem) {
.thing {
width: 75%;
}
}
.thing2 {
width: 50%;
}
@media (min-width: 30rem) {
.thing2 {
width: 75%;
}
}
- 组合放
.thing {
width: 50%;
}
.thing2 {
width: 50%;
}
@media (min-width: 30rem) {
.thing {
width: 75%;
}
.thing2 {
width: 75%;
}
}
2.7 viewpoet的meta标签
推荐使用
<meta name="viewport" content="width=device-width, initial-scale:1.0">
