随着iPad mini的发布，又一个新的屏幕尺寸诞生了。用不着全面统计，你就会发现移动互联网时代众多的屏幕规格，从智能手机的3、4、5英寸，到平板电脑的7、8、9、10英寸，再到笔记本和台式机的13至30英寸，绝非目前单一的固定或流式布局所能应付。于是，响应式设计应运而生，而且它也将成为移动互联网时代前端设计与开发人员的一门必修课。
本书堪称学习响应式Web设计的难得佳作。它不仅全面、细致、图文并茂地介绍了响应式设计相关的技术，比如媒体查询、流式布局、弹性媒体和弹性字体等，还把近几年来Web设计领域公认的最佳设计理念有机地融入到了实例当中，比如移动先行（Mobile First）、渐进增强、平稳退化、无障碍设计等。更加难得的是，本书以设计跨屏幕的网页（响应式设计）为出发点，以点带面，把如今Web设计领域两大标准的最新版本HTML5和CSS3也纳入其中...
随着iPad mini的发布，又一个新的屏幕尺寸诞生了。用不着全面统计，你就会发现移动互联网时代众多的屏幕规格，从智能手机的3、4、5英寸，到平板电脑的7、8、9、10英寸，再到笔记本和台式机的13至30英寸，绝非目前单一的固定或流式布局所能应付。于是，响应式设计应运而生，而且它也将成为移动互联网时代前端设计与开发人员的一门必修课。
本书堪称学习响应式Web设计的难得佳作。它不仅全面、细致、图文并茂地介绍了响应式设计相关的技术，比如媒体查询、流式布局、弹性媒体和弹性字体等，还把近几年来Web设计领域公认的最佳设计理念有机地融入到了实例当中，比如移动先行（Mobile First）、渐进增强、平稳退化、无障碍设计等。更加难得的是，本书以设计跨屏幕的网页（响应式设计）为出发点，以点带面，把如今Web设计领域两大标准的最新版本HTML5和CSS3也纳入其中，读者在掌握先进设计方法的同时也能掌握最新的设计技术（比如使用新的HTML5结构化语义标记、嵌入媒体、响应式视频，以及CSS3的新选择器、特效、过渡、变形和动画等），从而可以免除重复学习新标准之苦，让自己一步跨入Web设计领域的最前沿。无论你想学习响应式Web设计，还是学习HTML5和CSS3的实际应用，本书都能满足你的需要，是毋庸置疑的明智之选。
说到底，响应式Web设计并非一门独立的技术，而只是现有技术的一个组合应用。只要有一点HTML和CSS基础的读者都能顺利地掌握它。对于中、高级的前端设计和开发人员，翻阅本书也有助于理清自己的知识脉络，对这个新的设计理念获得更全面、深入的理解和把握。
习惯移动阅读的读者，可访问图灵社区，购买本书电子版：http://www.ituring.com.cn/book/1055
Ben Frain是一名具有十多年经验的网页设计师和前端工程师，直接与世界各地的客户和设计机构并肩工作。同时他还是一名技术记者，定期为一些关注Mac平台、前沿科技、网页设计和航空技术的刊物撰稿。
在此之前，他曾是一名怀才不遇的（而且谦虚谨慎的）电视演员，毕业于索尔福德大学的媒体与表演专业。他写了四部（自认为）同样被低估的剧本，而且始终心怀能卖出一部的信念（尽管不像最初那么强烈了）。
工作之余，在身体（和妻子）允许的情况下，他喜欢玩室内足球。 他的个人网站是www.benfrain.com，Twitter地址是twitter.com/benfrain。
蒂姆•伯纳斯李在1991年制作并发布了第一个网站，如今刚刚过去21个年头。在这21年里，计算机和互联网快速发展，这个世界的面貌也日新月异。在这个过程中，网页设计从无到有，从简单渐至专业，从可有可无变为广受关注。网页设计方法也在跟随时代不断创新，从最初简单的文字排版，到表格布局，再到DIV+CSS，直到现在广为流行的网格布局、流式布局等，设计师和开发者们一直致力于为全..
HTML5模板 Boilerplate( ）。这个模板预置了HTML5“最佳实践”，包括基础的样式、腻子脚本和可选的工具，比如Modernizr。
文档的主内容指的是文档中特有的内容，导航链接、版权信息、站点标志、广告和搜索表单 等多个文档中重复出现的内容不算主内容（除非网页或文档的主要内容就是搜索表单）。
每个页面的主内容区只能有一个（两个主内容就没有主内容了），而且不能作为 article、aside、header、footer、nav 或 header 等其他HTML5语义元素的后代。上述这些元素倒是可以放到 main 元素中。
section 元素用于定义文档或应用中一个通用的区块。
如果使用无序列表（ ul ）和列表标签（ li ）来写导航，那最好改成用 nav 嵌套多个 a 标签。
W3C HTML5规范对 nav 元素的具体规定：
figure 建议用于包含注解、图示、照片、代码，等等。如果图片或代码需要一个小标题（放在正文不太合适），那么用 figure 。
figure >
details summary I ate 15 scones in one day /summary p Of course I didn t. It would probably kill me if I did. What a way to go. Mmmmmm, scones! /p /details
要禁用summary样式，可以使用针对Webkit的伪选择符： summary::-webkit-details-marker { display: none; }
“em 元素表示内容中需要强调的部分。” 所以不强调时使用 b 标签，或者在合适的情况下，选 i 。
WCAG简明参考指南（ ）
如果无法给 button 设置样式（比如 display: table-cell 或 display: flex），至少应该选择更接近的方案，比如 a 标签。
谷歌的Chrome浏览器“Accessibility Developer Tools”可跨平台调试前端代码
video src= myVideo.mp4 width= 640 height= 480 controls autoplay preload= auto loop poster= myVideoPoster.png What, do you mean you don t understand HTML5? /video
controls autoplay preload= auto 是说默认播放视频
视频窗口的大小设置：video { max-width: 100%; height: auto; }
关于视频播放，参见
在线转换连接工具：
HTML5离线Web应用编写指南：
关于应用缓存的一些设置：
一个很好的h5教程及参考网站：
service worker 是一段运行在浏览器后台进程里的脚本，它独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。教程可以参见：
设置主页面内容的列数：main { column-count: 4; }
1. 固定列数，可变宽度
以给列间添加间距和分隔线： main { column-gap: 2em; column-rule: thin dotted #999; column-width: 12em; }
断字 ：word-wrap: break-word;
p >
截短文本
.truncate { width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: no-wrap; }
创建水平滚动面板
.Scroll_Wrapper { width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; } .Item { display: inline-flex; }
为了保证::before 和::after 显示，它们必须包含一个 content 值，就算空白也行。显示
.Scroll_Wrapper { width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; /* 在WebKiet的触摸设备上出现 */ -webkit-overflow-scrolling: touch; /* 在支持的IE中删除滚动条 */ -ms-overflow-style: none; } /* 防止WebKit浏览器中出现滚动条 */ .Scroll_Wrapper::-webkit-scrollbar { display: none; }
在浏览器支持的情况下使用Flexbox，在不支持的情况下回退到另一种布局方案。比如：
@supports (display: flex) { .Item { display: inline-flex; } } @supports not (display: flex) { .Item { display: inline-block; } }
如果不支持@supports ，这两块代码都不会被应用。
在@supports 得到广泛支持以前，可以使用Modernizr这个JavaScript工具。目前，它是在CSS中实现分支的最可靠方式。
script src= /js/libs/modernizr-2.8.3-custom.min.js /script
modernizr是一款检测css和h5属性的脚本，为适应兼容性而生。
[]是属性选择符，比如以下规则： img[alt] { border: 3px dashed #e15f5f; }
^表示选择“以……开头”的选择符： img[alt^= film ] { /* 样式 */ }
*表示“包含……”的选择符： [attribute*= value ] { /* 样式 */ }
$表示“以……结尾”的选择符： [attribute$= value ] { /* 样式 */ }
~表示可以使用“空格分隔的”属性选择符（注意 ~ 符号），IE7都支持： [data-film~= film ] { color: red; }
可以选择第一项的选择符div:first-child { /* 样式 */ }
可以选择最后一项的选择符（css3开始支持）： div:last-child { /* 样式 */ }
选择奇数个：.nav-Link:nth-child(odd) { /* 样式 */ }
选择偶数个： .nav-Link:nth-child(even) { /* 样式 */ }
CSS3提供了以下几个基于 nth 的规则： nth-child(n) nth-last-child(n) nth-of-type(n) nth-last-of-type(n)
@media (min-width: 55rem) { .Item { width: 25%; }
/* 每4个选1个，但仅限于最后4项 */
.Item:nth-child(4n+1):nth-last-child(-n+4),
/* 取得该集合后面的每一项 */
.Item:nth-child(4n+1):nth-last-child(-n+4) ~ .Item { border-bottom: 0; } }
.a-div:not(.not-me) { background-color: orange; border-radius: 50%; }
p:first-letter容易与伪元素混淆，CSS3要求把这种伪元素与伪类区分开。因此，现在应该写 p::first-letter。
IE9及以下版本不支持Flexbox。
.flex { display: flex; flex: 1; justify-content: space-between; }
要想支持安卓浏览器（v4及以下版本操作系统）和IE10，最终代码得这样写： .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
-ms-是Microsoft，-webkit-是 WebKit，-moz-是Mozilla。
这是让Flexbox跨浏览器的唯一有效方式。
自动生成跨浏览器的兼容性CSS代码工具Autoprefixer（ ）。这是一个很快、准确而且安装简便的PostCSS插件。
垂直居中文本的CSS规则如下： .CenterMe { background-color: indigo; color: #ebebeb; font-family: Oswald , sans-serif; font-size: 2rem; text-transform: uppercase; height: 200px; display: flex; align-items: center; justify-content: center; }
div >
flex-direction: row-reverse，把最后一项的 margin-left: auto 改成 margin-right: auto
如果将某元素无端地设置为 display: inline-flex（比如包含该元素的元素没有被设置为 display: flex），那么这个元素就会像 inline-block 和 inline-table 一样保留元素间的空白。如果这个元素处于一个Flexbox中，空白就会消失，就跟 table 中的 table-cell 一样。
.InlineFlex { display: inline-flex; align-items: center; height: 120px; padding: 0 4px; background-color: indigo; text-decoration: none; border-radius: 3px; color: #ddd; }
使用 align-self 属性决定自己的对齐方式。
Flexbox为交叉轴对齐提供了以下值。 flex-start：把元素的对齐设置为 flex-start，可以让元素从Flexbox父元素的起始边开始。 flex-end：把元素的对齐设置为 flex-end，会 沿Flexbox父元素的末尾对齐该元素。 center：把元素放在Flexbox元素的中间。 baseline：让Flexbox元素中的所有项沿基线对齐。 stretch：让Flexbox中的所有项（没交叉轴）拉伸至与父元素一样大。
.FlexInner { border: 1px solid #ebebeb; background-color: #34005B; display: flex; height: 100px; flex: 1; } 这里的 flex 实际上是三个属性合体的简写：flex-grow、flex-shrink 和 flex-basis。关于这三个属性的详细介绍，可以参考规范原文：
对于伸缩项，如果 flex 属性存在（且浏览器支持），则使用它的值控制元素的大小，忽略宽度和高度值的设置， 即使它们的声明位于 flex 声明之后，也会被忽略。
flex-grow（传给 flex 的第一个值）是相对于其他伸缩项，当前伸缩项在空间允许的情况下可以伸展的量。 flex-shrink 是在空间不够的情况下，当前伸缩项相对于其他伸缩项可以收缩的量。 flex-basis（传给 flex 的最后一个值）是伸缩项伸缩的基准值。
简单的粘附页脚
body div >
html, body { margin: 0; padding: 0; } html { height: 100%; } body { font-family: Oswald , sans-serif; color: #ebebeb; display: flex; flex-direction: column; min-height: 100%; } .MainContent { flex: 1; color: #333; padding: .5rem; } .Footer { background-color: violet; padding: .5rem; }
@media (min-width: 30rem) { .FlexWrapper { flex-flow: row wrap; } .FlexHeader { width: 100%; } .FlexContent { flex: 1; order: 3; } .FlexSideOne { width: 150px; order: 2; } .FlexSideTwo { width: 150px; order: 4; } .FlexFooter { width: 100%; } }
此视要向后兼容的力度，可能需要把内容和两个侧边栏封装在另一个元素中。
最新版本：
Grid Layout Module Level 1：
让浏览器知道图片的三个版本： img src= scones_small.jpg srcset= scones_medium.jpg 1.5x, scones_ large.jpg 2x alt= Scones taste amazing
img srcset= scones-small.jpg 450w, scones-medium.jpg 900w sizes= (min-width: 17em) 100vw, (min-width: 40em) 50vw src= sconessmall. jpg alt= Scones
CSS中如何定义像素：
picture source media= (min-width: 30em) srcset= cake-table.jpg source media= (min-width: 60em) srcset= cake-shop.jpg img src= scones.jpg alt= One way or another, you WILL get cake. /picture
这里的 img 标签是浏览器不支持 picture 元素，或者支持 picture 但没有合适媒体定义时的后备。
所谓响应式Web设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。
建议先为小屏幕设计内容、样式，然后再向大屏幕扩展。
在确定哪些平台和浏览器版本支持什么特性时，建议参考这个网站： 。这个网站的界面简洁，查询方便。
本书示例代码的地址是： 或
浏览器中用于呈现网页的区域叫 视口（viewport）。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。
meta name= viewport content= width=device-width 这个视口的 meta 标签是一种非标准的（但却是事实标准的）方式，它告诉浏览器怎么渲染网页。在这里， meta 标签想表达的意思是：按照设备的宽度（device-width）来渲染 网页内容。
要实现图片的自动缩放，也可以使用更通用的 width 属性，比如 width:100%。然而，这条规则在这里的效果不同。如果给 width 属性设置一个值，那么图片就会按照该值显示，不考虑自身固有宽度。
max-width: 100%;
所谓“断点”，就是某个宽度临界点，跨过这个点布局就会发生 显著变化。
实际的最小宽度可以使用不同的长度单位指定，比如百分比、em、rem和px。在CSS中，最小宽度媒体查询是这样写的： @media screen and (min-width: 50em) { /* 样式 */ }
基本上所有浏览器默认的文本大小都是16像素，因此用像素值除以16就可以得到rem值。
@media screen and (min-width: 50rem) { .IntroWrapper { display: table; table-layout: fixed; width: 100%; } .MoneyShot, .IntroText { display: table-cell; width: 50%; vertical-align: middle; text-align: center; } .IntroText { padding: .5rem; font-size: 2.5rem; text-align: left; } .Ingredients { font-size: .9rem; float: right; padding: 1rem; margin: 0 0 .5rem 1rem; border-radius: 3px; background-color: #ffffdf; border: 2px solid #e8cfa9; } .Ingredients h3 { margin: 0; } }
用SVG（Scalable Vector Graphics，可伸缩矢量图）可以简单地适用各种分辨率。
link rel= stylesheet media= screen and (orientation: portrait) href= portrait-screen.css /
导入样式表phone.css，条件是必须是屏幕设备，而且视口不超过360像素： @import url( phone.css ) screen and (max-width:360px);
使用CSS中的@import 会增加HTTP请求（进而影响加载速度）。
width：视口宽度。 height：视口高度。 device-width：渲染表面的宽度（可以认为是设备屏幕的宽度）。 device-height：渲染表面的高度（可以认为是设备屏幕的高度）。 orientation：设备方向是水平还是垂直。 aspect-ratio：视口的宽高比。16∶9的宽屏显示器可以写成 aspect-ratio:16/9。 color：颜色组分的位深。比如 min-color:16 表示设备至少支持16位深。 color-index：设备颜色查找表中的条目数，值必须是数值，且不能为负。 monochrome：单色帧缓冲中表示每个像素的位数，值必须是数值（整数），比如monochrome: 2，且不能为负。 resolution：屏幕或打印分辨率，比如 min-resolution: 300dpi。也可以接受每厘米多少点，比如 min-resolution: 118dpcm。 scan：针对电视的逐行扫描（progressive）和隔行扫描（interlace）。例如720p HD TV（720p中的p表示progressive，即逐行）可以使用 scan: progressive 来判断； 而1080i HD TV（1080i中的i表示interlace，即隔行）可以使用 scan: interlace 来判断。 grid：设备基于栅格还是位图。 上面列表中的特性，除 scan 和 grid 外，都可以加上 min 或 max 前缀以指定范围。看看下面的代码： @import url( tiny.css ) screen and (min-width:200px) and (maxwidth: 360px);
从原理上讲，位于下方的CSS样式会覆盖位于上方的目标相同的CSS样式，除非上方的选择符优先级更高或者更具体。
example_02-02展示了导航栏的生成方式
a href= # >
媒体查询的一个常见的使用场景，就是针对高分辨率设备编写特殊样式。比如： @media (min-resolution: 2dppx) { /* 样式 */ }
减小dppx值，可以扩大这个媒体查询的适用范围。
「阻塞渲染」仅是指该资源是否会暂停浏览器的首次页面渲染。无论CSS是否阻塞渲染，CSS资源都会被下载，只是说非阻塞性资源的优先级比较低而已。
多一个文件就要多一次HTTP请求，在某些条件下，HTTP请求多了会明显影响页面加载速度。
所有资源都采用了gzip压缩； 所有静态内容都缓存到了CDN； 所有多余的CSS规则都被清除了。
设置以内容实际大小的两倍（百分之二百）显示： meta name= viewport content= initial-scale=2.0,width =device-width /
允许用户最大将页面放大到设备宽度的三倍，最小可以将页面缩小至设备宽度的一半。 meta name= viewport content= width=device-width, maximum-scale=3, minimum-scale=0.5 / 甚至可以完全禁止用户缩放。禁止用户缩放 meta name= viewport content= initial-scale=1.0, user-scalable=no /
在CSS中写@viewport { width:320px; }。这同样可以将浏览器宽度设置为320像素。目前还没有多少浏览器支持这个CSS特性。考虑到面向未来，可以同时使用 meta 标签和@viewport 声明。
只针对支持JavaScript的浏览器编写相应的样式了。比如：.js .header { display: block; }。
@media (scripting: none) { /* 没有JavaScript时的样式 */ }
@media (scripting: enabled) { /* 有JavaScript时的样式 */ }
@media (scripting: initial-only) { /* JavaScript只在一开始有效的样式 */ }
“指针媒体特性用于查询鼠标之类的指针设备是否存在，以及存在时其精确的位置。
coarse 指针设备代表触摸屏设备中的手指。不过，这个值也可以是游戏机中的指针等不像鼠标那样能够提供精确控制的机制。 @media (pointer: coarse) { /* 针对coarse指针的样式 */ }
fine 指针设备可能是鼠标，也可能是手写笔或其他未来可能出现的精确指针设备
最保险的做法是假设用户在使用触摸屏设备，并相应地把界面元素调大。这样，即使用户使用的是鼠标，也不会影响体验。
@media (hover: on-demand) { /* 针对可通过启用程序实现悬停用户的样式 */ }
@media (hover) { /* 针对可悬停用户的样式 */ } 另外，还有 any-pointer 和 any-hover 媒体特性。这两个特性与前面的 pointer 和 hover 类似，只不过测试的不光是主输入机制，而是任意可能的输入设备。
我们可以在昏暗环境里减小所用颜色的亮度值。或者在光线充足的环境里提高亮度。环境媒体属性就是为解决这个问题而生的。 @media (light-level: normal) { /* 针对标准亮度的样式 */ } @media (light-level: dim) { /* 针对暗光线条件的样式 */ } @media (light-level: washed) { /* 针对强光线条件的样式 */ }
.Right { height: 625px; width: 10.4166667%; background-color: #03A66A; display: inline-block;
使用行内块（inline-block）来布局的最大问题，就是它会在HTML元素间渲染空白。
.WrapMiddle { width: 100%; font-size: 0; }
去掉留白。像前面的例子中使用大小为零的 font-size
关于如何去掉使用行内块时产生的空白： 。
要想完美地垂直居中，表元必须被包在一个表格元素中。
所谓响应式Web设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。
建议先为小屏幕设计内容、样式，然后再向大屏幕扩展。
在确定哪些平台和浏览器版本支持什么特性时，建议参考这个网站： 。这个网站的界面简洁，查询方便。
本书示例代码的地址是： 或
浏览器中用于呈现网页的区域叫 视口（viewport）。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。
meta name= viewport content= width=device-width 这个视口的 meta 标签是一种非标准的（但却是事实标准的）方式，它告诉浏览器怎么渲染网页。在这里， meta 标签想表达的意思是：按照设备的宽度（device-width）来渲染 网页内容。
要实现图片的自动缩放，也可以使用更通用的 width 属性，比如 width:100%。然而，这条规则在这里的效果不同。如果给 width 属性设置一个值，那么图片就会按照该值显示，不考虑自身固有宽度。
max-width: 100%;
所谓“断点”，就是某个宽度临界点，跨过这个点布局就会发生 显著变化。
实际的最小宽度可以使用不同的长度单位指定，比如百分比、em、rem和px。在CSS中，最小宽度媒体查询是这样写的： @media screen and (min-width: 50em) { /* 样式 */ }
基本上所有浏览器默认的文本大小都是16像素，因此用像素值除以16就可以得到rem值。
@media screen and (min-width: 50rem) { .IntroWrapper { display: table; table-layout: fixed; width: 100%; } .MoneyShot, .IntroText { display: table-cell; width: 50%; vertical-align: middle; text-align: center; } .IntroText { padding: .5rem; font-size: 2.5rem; text-align: left; } .Ingredients { font-size: .9rem; float: right; padding: 1rem; margin: 0 0 .5rem 1rem; border-radius: 3px; background-color: #ffffdf; border: 2px solid #e8cfa9; } .Ingredients h3 { margin: 0; } }
用SVG（Scalable Vector Graphics，可伸缩矢量图）可以简单地适用各种分辨率。
link rel= stylesheet media= screen and (orientation: portrait) href= portrait-screen.css /
导入样式表phone.css，条件是必须是屏幕设备，而且视口不超过360像素： @import url( phone.css ) screen and (max-width:360px);
使用CSS中的@import 会增加HTTP请求（进而影响加载速度）。
width：视口宽度。 height：视口高度。 device-width：渲染表面的宽度（可以认为是设备屏幕的宽度）。 device-height：渲染表面的高度（可以认为是设备屏幕的高度）。 orientation：设备方向是水平还是垂直。 aspect-ratio：视口的宽高比。16∶9的宽屏显示器可以写成 aspect-ratio:16/9。 color：颜色组分的位深。比如 min-color:16 表示设备至少支持16位深。 color-index：设备颜色查找表中的条目数，值必须是数值，且不能为负。 monochrome：单色帧缓冲中表示每个像素的位数，值必须是数值（整数），比如monochrome: 2，且不能为负。 resolution：屏幕或打印分辨率，比如 min-resolution: 300dpi。也可以接受每厘米多少点，比如 min-resolution: 118dpcm。 scan：针对电视的逐行扫描（progressive）和隔行扫描（interlace）。例如720p HD TV（720p中的p表示progressive，即逐行）可以使用 scan: progressive 来判断； 而1080i HD TV（1080i中的i表示interlace，即隔行）可以使用 scan: interlace 来判断。 grid：设备基于栅格还是位图。 上面列表中的特性，除 scan 和 grid 外，都可以加上 min 或 max 前缀以指定范围。看看下面的代码： @import url( tiny.css ) screen and (min-width:200px) and (maxwidth: 360px);
从原理上讲，位于下方的CSS样式会覆盖位于上方的目标相同的CSS样式，除非上方的选择符优先级更高或者更具体。
example_02-02展示了导航栏的生成方式
a href= # >
媒体查询的一个常见的使用场景，就是针对高分辨率设备编写特殊样式。比如： @media (min-resolution: 2dppx) { /* 样式 */ }
减小dppx值，可以扩大这个媒体查询的适用范围。
「阻塞渲染」仅是指该资源是否会暂停浏览器的首次页面渲染。无论CSS是否阻塞渲染，CSS资源都会被下载，只是说非阻塞性资源的优先级比较低而已。
多一个文件就要多一次HTTP请求，在某些条件下，HTTP请求多了会明显影响页面加载速度。
所有资源都采用了gzip压缩； 所有静态内容都缓存到了CDN； 所有多余的CSS规则都被清除了。
设置以内容实际大小的两倍（百分之二百）显示： meta name= viewport content= initial-scale=2.0,width =device-width /
允许用户最大将页面放大到设备宽度的三倍，最小可以将页面缩小至设备宽度的一半。 meta name= viewport content= width=device-width, maximum-scale=3, minimum-scale=0.5 / 甚至可以完全禁止用户缩放。禁止用户缩放 meta name= viewport content= initial-scale=1.0, user-scalable=no /
在CSS中写@viewport { width:320px; }。这同样可以将浏览器宽度设置为320像素。目前还没有多少浏览器支持这个CSS特性。考虑到面向未来，可以同时使用 meta 标签和@viewport 声明。
只针对支持JavaScript的浏览器编写相应的样式了。比如：.js .header { display: block; }。
@media (scripting: none) { /* 没有JavaScript时的样式 */ }
@media (scripting: enabled) { /* 有JavaScript时的样式 */ }
@media (scripting: initial-only) { /* JavaScript只在一开始有效的样式 */ }
“指针媒体特性用于查询鼠标之类的指针设备是否存在，以及存在时其精确的位置。
coarse 指针设备代表触摸屏设备中的手指。不过，这个值也可以是游戏机中的指针等不像鼠标那样能够提供精确控制的机制。 @media (pointer: coarse) { /* 针对coarse指针的样式 */ }
fine 指针设备可能是鼠标，也可能是手写笔或其他未来可能出现的精确指针设备
最保险的做法是假设用户在使用触摸屏设备，并相应地把界面元素调大。这样，即使用户使用的是鼠标，也不会影响体验。
@media (hover: on-demand) { /* 针对可通过启用程序实现悬停用户的样式 */ }
@media (hover) { /* 针对可悬停用户的样式 */ } 另外，还有 any-pointer 和 any-hover 媒体特性。这两个特性与前面的 pointer 和 hover 类似，只不过测试的不光是主输入机制，而是任意可能的输入设备。
我们可以在昏暗环境里减小所用颜色的亮度值。或者在光线充足的环境里提高亮度。环境媒体属性就是为解决这个问题而生的。 @media (light-level: normal) { /* 针对标准亮度的样式 */ } @media (light-level: dim) { /* 针对暗光线条件的样式 */ } @media (light-level: washed) { /* 针对强光线条件的样式 */ }
.Right { height: 625px; width: 10.4166667%; background-color: #03A66A; display: inline-block;
使用行内块（inline-block）来布局的最大问题，就是它会在HTML元素间渲染空白。
.WrapMiddle { width: 100%; font-size: 0; }
去掉留白。像前面的例子中使用大小为零的 font-size
关于如何去掉使用行内块时产生的空白： 。
要想完美地垂直居中，表元必须被包在一个表格元素中。
IE9及以下版本不支持Flexbox。
.flex { display: flex; flex: 1; justify-content: space-between; }
要想支持安卓浏览器（v4及以下版本操作系统）和IE10，最终代码得这样写： .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
-ms-是Microsoft，-webkit-是 WebKit，-moz-是Mozilla。
这是让Flexbox跨浏览器的唯一有效方式。
自动生成跨浏览器的兼容性CSS代码工具Autoprefixer（ ）。这是一个很快、准确而且安装简便的PostCSS插件。
垂直居中文本的CSS规则如下： .CenterMe { background-color: indigo; color: #ebebeb; font-family: Oswald , sans-serif; font-size: 2rem; text-transform: uppercase; height: 200px; display: flex; align-items: center; justify-content: center; }
div >
flex-direction: row-reverse，把最后一项的 margin-left: auto 改成 margin-right: auto
如果将某元素无端地设置为 display: inline-flex（比如包含该元素的元素没有被设置为 display: flex），那么这个元素就会像 inline-block 和 inline-table 一样保留元素间的空白。如果这个元素处于一个Flexbox中，空白就会消失，就跟 table 中的 table-cell 一样。
.InlineFlex { display: inline-flex; align-items: center; height: 120px; padding: 0 4px; background-color: indigo; text-decoration: none; border-radius: 3px; color: #ddd; }
使用 align-self 属性决定自己的对齐方式。
Flexbox为交叉轴对齐提供了以下值。 flex-start：把元素的对齐设置为 flex-start，可以让元素从Flexbox父元素的起始边开始。 flex-end：把元素的对齐设置为 flex-end，会 沿Flexbox父元素的末尾对齐该元素。 center：把元素放在Flexbox元素的中间。 baseline：让Flexbox元素中的所有项沿基线对齐。 stretch：让Flexbox中的所有项（没交叉轴）拉伸至与父元素一样大。
.FlexInner { border: 1px solid #ebebeb; background-color: #34005B; display: flex; height: 100px; flex: 1; } 这里的 flex 实际上是三个属性合体的简写：flex-grow、flex-shrink 和 flex-basis。关于这三个属性的详细介绍，可以参考规范原文：
对于伸缩项，如果 flex 属性存在（且浏览器支持），则使用它的值控制元素的大小，忽略宽度和高度值的设置， 即使它们的声明位于 flex 声明之后，也会被忽略。
flex-grow（传给 flex 的第一个值）是相对于其他伸缩项，当前伸缩项在空间允许的情况下可以伸展的量。 flex-shrink 是在空间不够的情况下，当前伸缩项相对于其他伸缩项可以收缩的量。 flex-basis（传给 flex 的最后一个值）是伸缩项伸缩的基准值。
简单的粘附页脚
body div >
html, body { margin: 0; padding: 0; } html { height: 100%; } body { font-family: Oswald , sans-serif; color: #ebebeb; display: flex; flex-direction: column; min-height: 100%; } .MainContent { flex: 1; color: #333; padding: .5rem; } .Footer { background-color: violet; padding: .5rem; }
@media (min-width: 30rem) { .FlexWrapper { flex-flow: row wrap; } .FlexHeader { width: 100%; } .FlexContent { flex: 1; order: 3; } .FlexSideOne { width: 150px; order: 2; } .FlexSideTwo { width: 150px; order: 4; } .FlexFooter { width: 100%; } }
此视要向后兼容的力度，可能需要把内容和两个侧边栏封装在另一个元素中。
最新版本：
Grid Layout Module Level 1：
让浏览器知道图片的三个版本： img src= scones_small.jpg srcset= scones_medium.jpg 1.5x, scones_ large.jpg 2x alt= Scones taste amazing
img srcset= scones-small.jpg 450w, scones-medium.jpg 900w sizes= (min-width: 17em) 100vw, (min-width: 40em) 50vw src= sconessmall. jpg alt= Scones
CSS中如何定义像素：
picture source media= (min-width: 30em) srcset= cake-table.jpg source media= (min-width: 60em) srcset= cake-shop.jpg img src= scones.jpg alt= One way or another, you WILL get cake. /picture
这里的 img 标签是浏览器不支持 picture 元素，或者支持 picture 但没有合适媒体定义时的后备。
如果要用一句话概括响应式网页设计,我觉得它是针对任意设备对网页 内容进行完美布局的一种显示机制。
script src= /js/libs/modernizr-2.8.3-custom.min.js /script
modernizr是一款检测css和h5属性的脚本，为适应兼容性而生。
[]是属性选择符，比如以下规则： img[alt] { border: 3px dashed #e15f5f; }
^表示选择“以……开头”的选择符： img[alt^= film ] { /* 样式 */ }
*表示“包含……”的选择符： [attribute*= value ] { /* 样式 */ }
$表示“以……结尾”的选择符： [attribute$= value ] { /* 样式 */ }
~表示可以使用“空格分隔的”属性选择符（注意 ~ 符号），IE7都支持： [data-film~= film ] { color: red; }
可以选择第一项的选择符div:first-child { /* 样式 */ }
可以选择最后一项的选择符（css3开始支持）： div:last-child { /* 样式 */ }
选择奇数个：.nav-Link:nth-child(odd) { /* 样式 */ }
选择偶数个： .nav-Link:nth-child(even) { /* 样式 */ }
CSS3提供了以下几个基于 nth 的规则： nth-child(n) nth-last-child(n) nth-of-type(n) nth-last-of-type(n)
@media (min-width: 55rem) { .Item { width: 25%; }
/* 每4个选1个，但仅限于最后4项 */
.Item:nth-child(4n+1):nth-last-child(-n+4),
/* 取得该集合后面的每一项 */
.Item:nth-child(4n+1):nth-last-child(-n+4) ~ .Item { border-bottom: 0; } }
.a-div:not(.not-me) { background-color: orange; border-radius: 50%; }
p:first-letter容易与伪元素混淆，CSS3要求把这种伪元素与伪类区分开。因此，现在应该写 p::first-letter。
HTML5模板 Boilerplate( ）。这个模板预置了HTML5“最佳实践”，包括基础的样式、腻子脚本和可选的工具，比如Modernizr。
文档的主内容指的是文档中特有的内容，导航链接、版权信息、站点标志、广告和搜索表单 等多个文档中重复出现的内容不算主内容（除非网页或文档的主要内容就是搜索表单）。
每个页面的主内容区只能有一个（两个主内容就没有主内容了），而且不能作为 article、aside、header、footer、nav 或 header 等其他HTML5语义元素的后代。上述这些元素倒是可以放到 main 元素中。
section 元素用于定义文档或应用中一个通用的区块。
如果使用无序列表（ ul ）和列表标签（ li ）来写导航，那最好改成用 nav 嵌套多个 a 标签。
W3C HTML5规范对 nav 元素的具体规定：
figure 建议用于包含注解、图示、照片、代码，等等。如果图片或代码需要一个小标题（放在正文不太合适），那么用 figure 。
figure >
details summary I ate 15 scones in one day /summary p Of course I didn t. It would probably kill me if I did. What a way to go. Mmmmmm, scones! /p /details
要禁用summary样式，可以使用针对Webkit的伪选择符： summary::-webkit-details-marker { display: none; }
“em 元素表示内容中需要强调的部分。” 所以不强调时使用 b 标签，或者在合适的情况下，选 i 。
WCAG简明参考指南（ ）
如果无法给 button 设置样式（比如 display: table-cell 或 display: flex），至少应该选择更接近的方案，比如 a 标签。
谷歌的Chrome浏览器“Accessibility Developer Tools”可跨平台调试前端代码
video src= myVideo.mp4 width= 640 height= 480 controls autoplay preload= auto loop poster= myVideoPoster.png What, do you mean you don t understand HTML5? /video
controls autoplay preload= auto 是说默认播放视频
视频窗口的大小设置：video { max-width: 100%; height: auto; }
关于视频播放，参见
在线转换连接工具：
HTML5离线Web应用编写指南：
关于应用缓存的一些设置：
一个很好的h5教程及参考网站：
service worker 是一段运行在浏览器后台进程里的脚本，它独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。教程可以参见：
设置主页面内容的列数：main { column-count: 4; }
1. 固定列数，可变宽度
以给列间添加间距和分隔线： main { column-gap: 2em; column-rule: thin dotted #999; column-width: 12em; }
断字 ：word-wrap: break-word;
p >
截短文本
.truncate { width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: no-wrap; }
创建水平滚动面板
.Scroll_Wrapper { width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; } .Item { display: inline-flex; }
为了保证::before 和::after 显示，它们必须包含一个 content 值，就算空白也行。显示
.Scroll_Wrapper { width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; /* 在WebKiet的触摸设备上出现 */ -webkit-overflow-scrolling: touch; /* 在支持的IE中删除滚动条 */ -ms-overflow-style: none; } /* 防止WebKit浏览器中出现滚动条 */ .Scroll_Wrapper::-webkit-scrollbar { display: none; }
在浏览器支持的情况下使用Flexbox，在不支持的情况下回退到另一种布局方案。比如：
@supports (display: flex) { .Item { display: inline-flex; } } @supports not (display: flex) { .Item { display: inline-block; } }
如果不支持@supports ，这两块代码都不会被应用。
在@supports 得到广泛支持以前，可以使用Modernizr这个JavaScript工具。目前，它是在CSS中实现分支的最可靠方式。
script src= /js/libs/modernizr-2.8.3-custom.min.js /script
modernizr是一款检测css和h5属性的脚本，为适应兼容性而生。
[]是属性选择符，比如以下规则： img[alt] { border: 3px dashed #e15f5f; }
^表示选择“以……开头”的选择符： img[alt^= film ] { /* 样式 */ }
*表示“包含……”的选择符： [attribute*= value ] { /* 样式 */ }
$表示“以……结尾”的选择符： [attribute$= value ] { /* 样式 */ }
~表示可以使用“空格分隔的”属性选择符（注意 ~ 符号），IE7都支持： [data-film~= film ] { color: red; }
可以选择第一项的选择符div:first-child { /* 样式 */ }
可以选择最后一项的选择符（css3开始支持）： div:last-child { /* 样式 */ }
选择奇数个：.nav-Link:nth-child(odd) { /* 样式 */ }
选择偶数个： .nav-Link:nth-child(even) { /* 样式 */ }
CSS3提供了以下几个基于 nth 的规则： nth-child(n) nth-last-child(n) nth-of-type(n) nth-last-of-type(n)
@media (min-width: 55rem) { .Item { width: 25%; }
/* 每4个选1个，但仅限于最后4项 */
.Item:nth-child(4n+1):nth-last-child(-n+4),
/* 取得该集合后面的每一项 */
.Item:nth-child(4n+1):nth-last-child(-n+4) ~ .Item { border-bottom: 0; } }
.a-div:not(.not-me) { background-color: orange; border-radius: 50%; }
p:first-letter容易与伪元素混淆，CSS3要求把这种伪元素与伪类区分开。因此，现在应该写 p::first-letter。
IE9及以下版本不支持Flexbox。
.flex { display: flex; flex: 1; justify-content: space-between; }
要想支持安卓浏览器（v4及以下版本操作系统）和IE10，最终代码得这样写： .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
-ms-是Microsoft，-webkit-是 WebKit，-moz-是Mozilla。
这是让Flexbox跨浏览器的唯一有效方式。
自动生成跨浏览器的兼容性CSS代码工具Autoprefixer（ ）。这是一个很快、准确而且安装简便的PostCSS插件。
垂直居中文本的CSS规则如下： .CenterMe { background-color: indigo; color: #ebebeb; font-family: Oswald , sans-serif; font-size: 2rem; text-transform: uppercase; height: 200px; display: flex; align-items: center; justify-content: center; }
div >
flex-direction: row-reverse，把最后一项的 margin-left: auto 改成 margin-right: auto
如果将某元素无端地设置为 display: inline-flex（比如包含该元素的元素没有被设置为 display: flex），那么这个元素就会像 inline-block 和 inline-table 一样保留元素间的空白。如果这个元素处于一个Flexbox中，空白就会消失，就跟 table 中的 table-cell 一样。
.InlineFlex { display: inline-flex; align-items: center; height: 120px; padding: 0 4px; background-color: indigo; text-decoration: none; border-radius: 3px; color: #ddd; }
使用 align-self 属性决定自己的对齐方式。
Flexbox为交叉轴对齐提供了以下值。 flex-start：把元素的对齐设置为 flex-start，可以让元素从Flexbox父元素的起始边开始。 flex-end：把元素的对齐设置为 flex-end，会 沿Flexbox父元素的末尾对齐该元素。 center：把元素放在Flexbox元素的中间。 baseline：让Flexbox元素中的所有项沿基线对齐。 stretch：让Flexbox中的所有项（没交叉轴）拉伸至与父元素一样大。
.FlexInner { border: 1px solid #ebebeb; background-color: #34005B; display: flex; height: 100px; flex: 1; } 这里的 flex 实际上是三个属性合体的简写：flex-grow、flex-shrink 和 flex-basis。关于这三个属性的详细介绍，可以参考规范原文：
对于伸缩项，如果 flex 属性存在（且浏览器支持），则使用它的值控制元素的大小，忽略宽度和高度值的设置， 即使它们的声明位于 flex 声明之后，也会被忽略。
flex-grow（传给 flex 的第一个值）是相对于其他伸缩项，当前伸缩项在空间允许的情况下可以伸展的量。 flex-shrink 是在空间不够的情况下，当前伸缩项相对于其他伸缩项可以收缩的量。 flex-basis（传给 flex 的最后一个值）是伸缩项伸缩的基准值。
简单的粘附页脚
body div >
html, body { margin: 0; padding: 0; } html { height: 100%; } body { font-family: Oswald , sans-serif; color: #ebebeb; display: flex; flex-direction: column; min-height: 100%; } .MainContent { flex: 1; color: #333; padding: .5rem; } .Footer { background-color: violet; padding: .5rem; }
@media (min-width: 30rem) { .FlexWrapper { flex-flow: row wrap; } .FlexHeader { width: 100%; } .FlexContent { flex: 1; order: 3; } .FlexSideOne { width: 150px; order: 2; } .FlexSideTwo { width: 150px; order: 4; } .FlexFooter { width: 100%; } }
此视要向后兼容的力度，可能需要把内容和两个侧边栏封装在另一个元素中。
最新版本：
Grid Layout Module Level 1：
让浏览器知道图片的三个版本： img src= scones_small.jpg srcset= scones_medium.jpg 1.5x, scones_ large.jpg 2x alt= Scones taste amazing
img srcset= scones-small.jpg 450w, scones-medium.jpg 900w sizes= (min-width: 17em) 100vw, (min-width: 40em) 50vw src= sconessmall. jpg alt= Scones
CSS中如何定义像素：
picture source media= (min-width: 30em) srcset= cake-table.jpg source media= (min-width: 60em) srcset= cake-shop.jpg img src= scones.jpg alt= One way or another, you WILL get cake. /picture
这里的 img 标签是浏览器不支持 picture 元素，或者支持 picture 但没有合适媒体定义时的后备。
所谓响应式Web设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。
建议先为小屏幕设计内容、样式，然后再向大屏幕扩展。
在确定哪些平台和浏览器版本支持什么特性时，建议参考这个网站： 。这个网站的界面简洁，查询方便。
本书示例代码的地址是： 或
浏览器中用于呈现网页的区域叫 视口（viewport）。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。
meta name= viewport content= width=device-width 这个视口的 meta 标签是一种非标准的（但却是事实标准的）方式，它告诉浏览器怎么渲染网页。在这里， meta 标签想表达的意思是：按照设备的宽度（device-width）来渲染 网页内容。
要实现图片的自动缩放，也可以使用更通用的 width 属性，比如 width:100%。然而，这条规则在这里的效果不同。如果给 width 属性设置一个值，那么图片就会按照该值显示，不考虑自身固有宽度。
max-width: 100%;
所谓“断点”，就是某个宽度临界点，跨过这个点布局就会发生 显著变化。
实际的最小宽度可以使用不同的长度单位指定，比如百分比、em、rem和px。在CSS中，最小宽度媒体查询是这样写的： @media screen and (min-width: 50em) { /* 样式 */ }
基本上所有浏览器默认的文本大小都是16像素，因此用像素值除以16就可以得到rem值。
@media screen and (min-width: 50rem) { .IntroWrapper { display: table; table-layout: fixed; width: 100%; } .MoneyShot, .IntroText { display: table-cell; width: 50%; vertical-align: middle; text-align: center; } .IntroText { padding: .5rem; font-size: 2.5rem; text-align: left; } .Ingredients { font-size: .9rem; float: right; padding: 1rem; margin: 0 0 .5rem 1rem; border-radius: 3px; background-color: #ffffdf; border: 2px solid #e8cfa9; } .Ingredients h3 { margin: 0; } }
用SVG（Scalable Vector Graphics，可伸缩矢量图）可以简单地适用各种分辨率。
link rel= stylesheet media= screen and (orientation: portrait) href= portrait-screen.css /
导入样式表phone.css，条件是必须是屏幕设备，而且视口不超过360像素： @import url( phone.css ) screen and (max-width:360px);
使用CSS中的@import 会增加HTTP请求（进而影响加载速度）。
width：视口宽度。 height：视口高度。 device-width：渲染表面的宽度（可以认为是设备屏幕的宽度）。 device-height：渲染表面的高度（可以认为是设备屏幕的高度）。 orientation：设备方向是水平还是垂直。 aspect-ratio：视口的宽高比。16∶9的宽屏显示器可以写成 aspect-ratio:16/9。 color：颜色组分的位深。比如 min-color:16 表示设备至少支持16位深。 color-index：设备颜色查找表中的条目数，值必须是数值，且不能为负。 monochrome：单色帧缓冲中表示每个像素的位数，值必须是数值（整数），比如monochrome: 2，且不能为负。 resolution：屏幕或打印分辨率，比如 min-resolution: 300dpi。也可以接受每厘米多少点，比如 min-resolution: 118dpcm。 scan：针对电视的逐行扫描（progressive）和隔行扫描（interlace）。例如720p HD TV（720p中的p表示progressive，即逐行）可以使用 scan: progressive 来判断； 而1080i HD TV（1080i中的i表示interlace，即隔行）可以使用 scan: interlace 来判断。 grid：设备基于栅格还是位图。 上面列表中的特性，除 scan 和 grid 外，都可以加上 min 或 max 前缀以指定范围。看看下面的代码： @import url( tiny.css ) screen and (min-width:200px) and (maxwidth: 360px);
从原理上讲，位于下方的CSS样式会覆盖位于上方的目标相同的CSS样式，除非上方的选择符优先级更高或者更具体。
example_02-02展示了导航栏的生成方式
a href= # >
媒体查询的一个常见的使用场景，就是针对高分辨率设备编写特殊样式。比如： @media (min-resolution: 2dppx) { /* 样式 */ }
减小dppx值，可以扩大这个媒体查询的适用范围。
「阻塞渲染」仅是指该资源是否会暂停浏览器的首次页面渲染。无论CSS是否阻塞渲染，CSS资源都会被下载，只是说非阻塞性资源的优先级比较低而已。
多一个文件就要多一次HTTP请求，在某些条件下，HTTP请求多了会明显影响页面加载速度。
所有资源都采用了gzip压缩； 所有静态内容都缓存到了CDN； 所有多余的CSS规则都被清除了。
设置以内容实际大小的两倍（百分之二百）显示： meta name= viewport content= initial-scale=2.0,width =device-width /
允许用户最大将页面放大到设备宽度的三倍，最小可以将页面缩小至设备宽度的一半。 meta name= viewport content= width=device-width, maximum-scale=3, minimum-scale=0.5 / 甚至可以完全禁止用户缩放。禁止用户缩放 meta name= viewport content= initial-scale=1.0, user-scalable=no /
在CSS中写@viewport { width:320px; }。这同样可以将浏览器宽度设置为320像素。目前还没有多少浏览器支持这个CSS特性。考虑到面向未来，可以同时使用 meta 标签和@viewport 声明。
只针对支持JavaScript的浏览器编写相应的样式了。比如：.js .header { display: block; }。
@media (scripting: none) { /* 没有JavaScript时的样式 */ }
@media (scripting: enabled) { /* 有JavaScript时的样式 */ }
@media (scripting: initial-only) { /* JavaScript只在一开始有效的样式 */ }
“指针媒体特性用于查询鼠标之类的指针设备是否存在，以及存在时其精确的位置。
coarse 指针设备代表触摸屏设备中的手指。不过，这个值也可以是游戏机中的指针等不像鼠标那样能够提供精确控制的机制。 @media (pointer: coarse) { /* 针对coarse指针的样式 */ }
fine 指针设备可能是鼠标，也可能是手写笔或其他未来可能出现的精确指针设备
最保险的做法是假设用户在使用触摸屏设备，并相应地把界面元素调大。这样，即使用户使用的是鼠标，也不会影响体验。
@media (hover: on-demand) { /* 针对可通过启用程序实现悬停用户的样式 */ }
@media (hover) { /* 针对可悬停用户的样式 */ } 另外，还有 any-pointer 和 any-hover 媒体特性。这两个特性与前面的 pointer 和 hover 类似，只不过测试的不光是主输入机制，而是任意可能的输入设备。
我们可以在昏暗环境里减小所用颜色的亮度值。或者在光线充足的环境里提高亮度。环境媒体属性就是为解决这个问题而生的。 @media (light-level: normal) { /* 针对标准亮度的样式 */ } @media (light-level: dim) { /* 针对暗光线条件的样式 */ } @media (light-level: washed) { /* 针对强光线条件的样式 */ }
.Right { height: 625px; width: 10.4166667%; background-color: #03A66A; display: inline-block;
使用行内块（inline-block）来布局的最大问题，就是它会在HTML元素间渲染空白。
.WrapMiddle { width: 100%; font-size: 0; }
去掉留白。像前面的例子中使用大小为零的 font-size
关于如何去掉使用行内块时产生的空白： 。
要想完美地垂直居中，表元必须被包在一个表格元素中。