响应式Web设计

HTML5模板 Boilerplate(http://html5boilerplate.com/ ）。这个模板预置了HTML5“最佳实践”，包括基础的样式、腻子脚本和可选的工具，比如Modernizr。

文档的主内容指的是文档中特有的内容，导航链接、版权信息、站点标志、广告和搜索表单 等多个文档中重复出现的内容不算主内容（除非网页或文档的主要内容就是搜索表单）。

每个页面的主内容区只能有一个（两个主内容就没有主内容了），而且不能作为 article、aside、header、footer、nav 或 header 等其他HTML5语义元素的后代。上述这些元素倒是可以放到 main 元素中。

section 元素用于定义文档或应用中一个通用的区块。

如果使用无序列表（<ul>）和列表标签（<li>）来写导航，那最好改成用 nav 嵌套多个 a 标签。

W3C HTML5规范对 <nav> 元素的具体规定： http://www.w3.org/TR/html5/sections.html#the-nav-element

<figure> 建议用于包含注解、图示、照片、代码，等等。如果图片或代码需要一个小标题（放在正文不太合适），那么用<figure>。

<figure class="MoneyShot"> <img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones" /> <figcaption class="ImageCaption">Incredible scones, picture from Wikipedia</figcaption> </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简明参考指南（ https://www.w3.org/WAI/WCAG20/glance/Overview.html ）

如果无法给 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; }

关于视频播放，参见 http://alistapart.com/article/creating-intrinsic-ratios-for-video

在线转换连接工具：http://embedresponsively.com/

HTML5离线Web应用编写指南： https://www.w3.org/TR/2011/WD-html5-20110525/offline.html

关于应用缓存的一些设置： http://alistapart.com/article/application-cache-is-a-douchebag

一个很好的h5教程及参考网站： http://diveintohtml5.info/offline.html

service worker 是一段运行在浏览器后台进程里的脚本，它独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。教程可以参见：

https://www.w3.org/TR/service-workers/

http://www.html5rocks.com/en/tutorials/service-worker/introduction/

设置主页面内容的列数：main { column-count: 4; }

1. 固定列数，可变宽度

以给列间添加间距和分隔线： main { column-gap: 2em; column-rule: thin dotted #999; column-width: 12em; }

断字 ：word-wrap: break-word;

<p class="truncate">OK, listen up, I've figured outthe key eternal happiness. All you need to do is eat lots of scones.</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（ https://github.com/postcss/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 class="MenuWrap"> <a href="#" class="ListItem">Home</a> <a href="#" class="ListItem">About Us</a> <a href="#" class="ListItem">Products</a> <a href="#" class="ListItem">Policy</a> <a href="#" class="LastItem">Contact Us</a> </div> 这是CSS： .MenuWrap { background-color: indigo; font-family: 'Oswald', sans-serif; font-size: 1rem; min-height: 2.75rem; display: flex; align-items: center; padding: 0 1rem; } .ListItem, .LastItem { color: #ebebeb; text-decoration: none; } .ListItem { margin-right: 1rem; } .LastItem { margin-left: auto; }

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。关于这三个属性的详细介绍，可以参考规范原文： https://www.w3.org/TR/css-flexbox-1/

对于伸缩项，如果 flex 属性存在（且浏览器支持），则使用它的值控制元素的大小，忽略宽度和高度值的设置， 即使它们的声明位于 flex 声明之后，也会被忽略。

flex-grow（传给 flex 的第一个值）是相对于其他伸缩项，当前伸缩项在空间允许的情况下可以伸展的量。 flex-shrink 是在空间不够的情况下，当前伸缩项相对于其他伸缩项可以收缩的量。 flex-basis（传给 flex 的最后一个值）是伸缩项伸缩的基准值。

简单的粘附页脚

<body> <div class="MainContent"> Here is a bunch of text up at the top. But there isn't enough content to push the footer to the bottom of the page. </div> <div class="Footer"> However, thanks to flexbox, I've been put in my place. </div> </body>

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%; } }

此视要向后兼容的力度，可能需要把内容和两个侧边栏封装在另一个元素中。

最新版本： https://www.w3.org/TR/css-flexbox-1/

Grid Layout Module Level 1： https://www.w3.org/TR/css3-grid-layout/

让浏览器知道图片的三个版本： <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中如何定义像素： https://www.w3.org/TR/css3-values/

<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设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

建议先为小屏幕设计内容、样式，然后再向大屏幕扩展。

在确定哪些平台和浏览器版本支持什么特性时，建议参考这个网站： http://caniuse.com 。这个网站的界面简洁，查询方便。

本书示例代码的地址是： http://rwd.education/download.zip 或 https://github.com/benfrain/rwd

浏览器中用于呈现网页的区域叫 视口（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="#" class="CardLink CardLink_Hearts">Hearts </a> <a href="#" class="CardLink CardLink_Clubs">Clubs </a> <a href="#" class="CardLink CardLink_Spades">Spades </a> <a href="#" class="CardLink CardLink_Diamonds"> Diamonds</a> 接下来是CSS： .CardLink { display: block; color: #666; text-shadow: 0 2px 0 #efefef; text-decoration: none; height: 2.75rem; line-height: 2.75rem; border-bottom: 1px solid #bbb; position: relative; } @media (min-width: 300px) { .CardLink { padding-left: 1.8rem; font-size: 1.6rem; } } .CardLink:before { display: none; position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .CardLink_Hearts:before { content: "?"; } .CardLink_Clubs:before { content: "?"; } .CardLink_Spades:before { content: "?"; } .CardLink_Diamonds:before { content: "?"; } @media (min-width: 300px) { .CardLink:before { display: block; } }

媒体查询的一个常见的使用场景，就是针对高分辨率设备编写特殊样式。比如： @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

关于如何去掉使用行内块时产生的空白： http://css-tricks.com/fighting-the-space-between-inline-block-elements/ 。

要想完美地垂直居中，表元必须被包在一个表格元素中。