<HTML5秘籍>——第7章（CSS3与响应式Web设计）

CSS3提供了一个完美的工具：媒体查询(media query)。通过媒体查询，可以让网站根据窗口大小或设备的不同，无缝地在不同的样式集之间切换。

固定布局：以前都是基于960px的固定宽度来做一个页面

流式布局：实际开发中，大家都习惯开始的时候先使用固定布局，然后在此基础上创建流式布局

边框宽度不接受百分比，为绝对值

CSS3的box-sizing：兼容IE8+

如果不支持媒体查询的浏览器呢，用Respond.js(respond.js)，但它目前无法解析CSS的@import命令

CSS3的calc()：IE9+部分支持，Android也得4.4才部分支持

如果你需要混合使用比例和固定单位，可以让CSS3帮你计算一个结果比如，width:
calc(67% - 5);

流式图片：需要用到服务端代码、Web服务和JavaScript库，设置img{max-width:
100%}让大图片去适应小屏幕（IE-7不认识max-width，要设置width:100%）

流式排版：

①百分比和em的结果相同，都是让蚊子相对于浏览器默认的文字大小缩放。

②要想用固定的外边距和内边距。可以在等比缩放的其中一栏再额外增加一个元素，给这个元素设定固定宽度的外边距和内部局，由于这个元素位于等比缩放的顶级布局元素的内部，因此它的宽度会自动适应窗口的大小变化。同样，边框也是这样。这个技巧已经被使用很多年了，虽然会增加一点标记的复杂性（多了一层布局元素）

③对多数布局而言，使用em（和父元素的文字大小由关）单位设定边框、内边距、外边距，最大的好处是可以防止元素在小窗口里显示得过大，或者说在移动设备的小屏幕上显得太过突兀。

④rem相对单位：兼容性，IE9+（9-10部分支持，不能写在font简写属性上或者伪元素上）

视口：能缩小网页的区域

媒体查询：

媒体特性：width(min-width,max-width)、device-width(min-device-width,max-device-witdh，当前计算机或设备屏幕的宽度)、orientation（landscape或portrait）、device-aspect-ratio(min-device-aspect-ratio,max-device-aspecr-ratio，显示区域的宽高比)

CSS2.1方法：<link rel="stylesheet" media="screen" href="style.css">

@media (max-width: 480px){}

浏览器窗口小于等于480px

目前最流行的媒体特性是max-device-width（用于创建手机版网站）、max-width（用于针对屏幕宽度设定不同的样式，本人只用过这,但书上说，要针对桌面浏览器的窄窗口，应该使用max-width，而要针对移动浏览器，就要使用max-device-width）和orientation（用于根据平板电脑或iPad的横向或属相来改变布局）

媒体查询的高级条件：你需要注意自己的样式规则会不会意外叠加。一是使用小数，或者使用not关键字

@media (min-width: 600px) and (max-width: 700px){}

@media (not max-width: 600px) and (max-width: 700px){};

更进一步，你还可以写一个媒体查询列表。查询列表中的任意一个查询为真，则加载文件。全部查询都不为真，则不加载

<link rel="stylesheet" media="screen and (orientation: portrail) and (min-width: 800px), projection" href="style.css"/>

有两点需要注意：第一，媒体查询之间使用逗号间隔。第二，你会注意到在projection之后，没有and，也没有任何特性/值的组合。意味着，只要是projection就满足条件。
还可以用CSS的@import指令，

@import url(style.css) screen adn (max-width: 360px)

切记，使用CSS的@import方式会增加HTTP请求（这会影响加载速度），所以请谨慎使用该方法。

隐藏和替换<section>

PC移动一体化缺点：

①如果隐藏的分区里包含图片，浏览器仍会下载它们，只是不显示而已。

②专门针对移动的媒体查询代码多余了或者专门针对PC端的代码多余了

解决办法：①不隐藏，换成其他表现形式，比如复杂的导航或菜单，替换成轻量简单的下拉菜单等

②通过服务器端代码监测每一个请求，确认浏览器来自移动设备还是桌面设备，然后分别发送不同的内容。这种方案更好，当然对你的时间和技能也是个挑战

③分开保存专门针对移动端和PC端的媒体查询代码

替换整个样式表

如果样式不多，使用@media块就行，所有样式都可以放在一个文件里。但如果修改得多，那可能要创建一个新样式表会更便于管理

<link rel="stylesheet" media="screen and
(max-width: 568px) " href="small_styles.css">,但要记住一定要把媒体类型放在前头，而且别把它放在括号里

识别特定的移动设备

如果想监测手机，那么将max-device-width设定为568px。这是个经验值，涵盖目前的iPhone和Android手机，而且不管是竖向还是横向，因为这不会改变device-width，只会改变width

例如，尽管iPhone物理像素是640px，但它会声明自己的CSS像素为320像素（竖向）。这样是为了避免让网站误认为自己是大屏幕，而显示桌面版的网站。最新的高分辨率设备都是这样处理了。它们因此引入了一个比例，叫像素比device-pixel-ratio