响应式Web设计笔记

源码参考：http://rwd.education/download.zip或https://git-hub.com/benfrain/rwd

1. head

<meta name="viewport" content="width=device-width">在这里，标签想表达的意思是：按照设备的宽度（device-width）来渲染网
页内容。

2.max-width

为什么不用width:100%?
要实现图片的自动缩放，也可以使用更通用的 width 属性，比如width:100%。然而，这条规则在这里的效果不同。如果给width属性设置一个值，那么图片就会按照该值显示，不考虑自身固有宽度。

3.媒体查询

媒体查询可以让我们在某些条件下（如宽度和高度为多少的情况下）为网页应用样式

//最小宽度媒体查询示例

@media screen and (min-width: 50em) { 
 /* 样式 */ 
} 

@media指令告诉浏览器这里是一个媒体查询，screen告诉浏览器这里的规则只适用于屏幕类型，而and (min-width: 50em)的意思是其中的规则只适用于视口宽度在50em以上的情况。

基本上所有浏览器默认的文本大小都是16像素，因此用像素值除以16就可以得到rem值。

在 link 标签中使用媒体查询

<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css" />

首先，媒体查询表达式询问了设备的类型（是屏幕设备吗？），然后又询问特性（你的屏幕是垂直方向吗？）。显然，样式表portrait-screen.css会应用给任何有屏幕且屏幕方向垂直的设备，而不符合这两个条件的设备则不会获得其样式。如果在媒体查询表达式的开头添加一个not，就可以把询问的条件反过来。

组合媒体查询

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

首先，逗号分隔每个媒体查询表达式。其次，在projection（投影机）之后没有任何特性/值对。这样省略特定的特性，表示适用于具备任何特性的该媒体类型。在这里，表示可以适用于任何投影机。

@import 与媒体查询

@import url("phone.css") screen and (max-width:360px);

使用CSS中的@import会增加HTTP请求（进而影响加载速度），因此请慎用

在 CSS 中使用媒体查询

常见的是在CSS文件内部直接使用媒体查询

@media screen and (max-device-width: 400px) { 
 h1 { color: green } 
} 

首先使用@media规则声明这是一个媒体查询，然后指定匹配的设备类型。多数情况下，并不需要指定screen。

性能优化首先检查

• 所有图片都压缩过了；
• 所有脚本都拼接和缩短了；
• 所有资源都采用了gzip压缩；
• 所有静态内容都缓存到了CDN；
• 所有多余的CSS规则都被清除了。

第三章 弹性布局和响应式图片

3.4 响应式图片

1.通过srcset切换分辨率

<img src="scones_small.jpg" srcset="scones_medium.jpg 1.5x, scones_large.jpg 2x" alt="Scones taste amazing"> 

1. src有两层含义，一是指定1倍大小的图片，二是在不支持srcset属性的浏览器种作后备。用最小的图片以供更快的加载。
2. 对于支持srcset属性的浏览器，通过逗号分隔的图片描述，让浏览器自己决定选择哪一个。图片描述首先是图片名（如scones_medium.jpg），然后是一个分辨率说明。本例中用的是1.5x和2x，其中的数字可以是任意整数，比如3x或4x都可以

2.srcset 及 sizes 联合切换

在响应式设计中，经常可以看到小屏幕中全屏显示，而在大屏幕上只显示一半宽的图片。

<img srcset="scones-small.jpg 450w, scones-medium.jpg 900w" sizes="(min-width: 17em) 100vw, (min-width: 40em) 50vw" src="sconessmall.jpg" alt="Scones"> 

这里照样使用了srcset属性。不过，这一次在指定图片描述时，我们添加了以w为后缀的值。这个值的意思是告诉浏览器图片有多宽。这里表示图片分别是450像素宽（scones-small.jpg）和900像素宽（scones-medium.jpg）。但这里以w为后缀的值并不是“真实”大小，它只是对浏览器的一个提示，大致等于图片的“CSS像素”大小。

使用w后缀的值对引入sizes属性非常重要。通过后者可以把意图传达给浏览器。在前面的例子中，我们用第一个值告诉浏览器“在最小宽度为17em的设备中，我想让图片显示的宽度约为100vw”。

sizes属性的第二个值，意思其实是“如果设备宽度大于等于40em，我只想让对应的图片显示为50vw宽”。我们用DPI（或表示Device Pixel Ratio的DPR，即设备像素比）来解释就明白了。比如，如果设备宽度是320像素，而分辨率为2x（实际宽度是640像素），那浏览器可能会选择900像素宽的图片，因为对当前屏幕宽度而言，它是第一个符合要求的足够大的图片。

3.picture元素

<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>

首先，要知道picture元素只是一个容器，为我们给其中的img元素指定图片提供便利。如你想为图片添加样式，那目标应该是它内部的那个img。

这里的img标签是浏览器不支持picture元素，或者支持picture但没有合适媒体定义时的后备。

这里最不同的是source标签。在这个标签里，可以使用媒体查询表达式明确告诉浏览器在
什么条件下使用什么图片。

使用新图片格式

picture还支持提供可替换的图片格式。

<picture> 
 <source type="image/webp" srcset="scones-baby-yeah.webp"> 
 <img src="scones-baby-yeah.jpg" alt="Again, you WILL eat cake."> 
</picture>

在这里用type属性把WebP指定为优先使用的图片格式。浏览器如果能显示，就显示，如果不能，就使用img标签里的图片。

第五章 CSS3新特性

5.3 便携CSS技巧

CSS响应式多列布局

<main> 
 <p>lloremipsimLoremipsum dolor sit amet, consectetur 
<!-- 省略很多文本 --> 
</p> 
 <p>lloremipsimLoremipsum dolor sit amet, consectetur 
<!-- 省略很多文本 --> 
</p> 
</main> 

设定列宽：

main { 
 column-width: 12em; 
} 

1. 固定列数，可变宽度

main { 
 column-count: 4; 
} 

2. 添加列间距和分隔线

main { 
 column-gap: 2em; 
 column-rule: thin dotted #999; 
 column-width: 12em; 
} 

5.5 在 CSS 中创建分支

要做出任何地方、任何设备上都同样出色的响应式设计，经常会碰到某些设备不支持什么特性或技术的情况。此时，往往需要在CSS中创建一个分支。如果浏览器支持某特性，就应用一段代码；如果不支持，则应用另一段代码。

在CSS中创建分支有两种手段。一是完全基于CSS，但支持的浏览器却不多； 二是借助JavaScript库，获得广泛兼容性。

5.5.1 特性查询

CSS 原生的分支语法就是特性查询，属于 CSS Conditional Rules Module Level 3（http://www.w3.org/TR/css3-conditional/）。
不过现在，IE11及之前的版本和Safari（包括iOS 8.1之前的iOS设备）不支持这个特性。所以说兼容性不完美。

@supports (display: flex) { 
 .Item { 
 display: inline-flex; 
 } 
} 
@supports not (display: flex) { 
 .Item { 
 display: inline-block; 
 } 
} 

在浏览器支持的情况下使用Flexbox，在不支持的情况下回退到另一种布局方案。这里定义了一块代码在浏览器支持某特性时应用，定义了另一块代码在浏览器不支持该特性时应用。这样写的前提是浏览器支持@supports，可如果不支持，这两块代码都不会被应用。

最好首先写默认的声明，然后再写@supports声明。这样，如果浏览器支持@supports，其中的规则会覆盖默认规则；否则，其中的规则就会被忽略。因此，前面的例子可以重写成这样：

.Item { 
 display: inline-block; 
} 
@supports (display: flex) { 
 .Item { 
 display: inline-flex; 
 } 
} 

5.5.2 组合条件

//and 关键字
@supports ((display: flex) and (pointer: coarse)) { 
 .Item { 
    display: inline-flex; 
 } 
} 

//or 关键字
@supports ((display: flex) and (pointer: coarse)) or (transform: translate3d(0, 0, 0)) { 
 .Item { 
    display: inline-flex; 
 } 
} 

5.5.3 Modernizr

在@supports得到广泛支持以前，可以使用Modernizr这个JavaScript工具。目前，它是在CSS中实现分支的最可靠方式。

使用Modernizr检测特性，在head中添加：

<script src="/js/libs/modernizr-2.8.3-custom.min.js"></script> 

这样，当浏览器加载页面后，就会运行Modernizr内置的所有测试。如果浏览器通过测试，Modernizr会（为我们）在html标签上添加一个类。

比如，Modernizr在检测完浏览器特性后，可能会给html标签添加以下这些类

<html class="js no-touch cssanimations csstransforms csstransforms3d csstransitions svg inlinesvg" lang="en"> 

这些类只反映了部分特性，包括：动画、变形、SVG、行内SVG，以及对触摸的支持。

示例1：

.widget { 
 height: 1rem; 
} 
.touch .widget { 
 height: 2rem; 
}

部件本来是1rem高，但如果html标签上有（Modernizr添加的）touch类，那么它就会变成2rem高。

5.7 CSS3 结构化伪类

5.7.1 :last-child

div:first-child { 
 /* 样式 */ 
} 

div:last-child { 
 /* 样式 */ 
} 

//针对只有一项
div:only-child{
    /* 样式 */ 
}

//唯一一个当前标签
div:only-of-type{
    /* 样式 */ 
}

5.7.2 nth-child

//选择奇数个
div:nth-child(odd){
    
}

//偶数个
div:nth-child(even){
    
}

5.7.3 理解 nth

• nth-child(n)： nth-child 选择符选择的是同级 DOM 中的子元素，与类无关（不区分标记类型）
• nth-last-child(n)：倒数第一个开始
• nth-of-type(n)：用来区分标记类型
• nth-last-of-type(n)

n可以传：

• 整数
• 数值表达式

//这个nth选择符从第三项开始，每两项选择一项
span:nth-child(2n+3) { 
 color: #f90; 
 border-radius: 50%; 
} 

5.7.5 :not

表示取反，非…

div { 
 display: inline-block; 
 height: 2rem; 
 width: 2rem; 
 background-color: blue; 
} 
.a-div:not(.not-me) { 
 background-color: orange; 
}

5.7.6 :empty

用于内容可能为空的情况

<div class="thing"></div> 
.thing { 
 padding: 1rem; 
 background-color: violet; 
}

//用:empty来隐藏
.thing:empty { 
 display: none; 
} 

需要注意：空格还是会看做有内容，注释不算内容。

5.7.7 :first-line

p::first-line { 
 color: #ff0cff; 
} 

会让第一行文本显示成粉红色。而且，随着视口大小变化，呈现粉红色的文本长度也会变化。

这样，不用修改标记，始终都能确保第一行被选中（“第一行”是指浏览器渲染结果的第一行，而不是标记中文本的第一行）。在响应式设计中，利用这个伪元素可以轻松做到让第一行与其他行的样式不同

5.8 CSS 自定义属性和变量

格式：--自定义属性名:

引用属性时使用var()

示例：

//:root伪类把自定义属性保存在文档根元素上（可以保存到任何规则中）
:root { 
 --MainFont: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
}

.Title { 
 font-family: var(--MainFont); 
} 

5.9 CSS calc

计算样式

.thing { 
 width: calc(50% - 10px); 
} 

5.10 CSS Level 4 选择符

5.10.1 :has 伪类

//给一个包含figcaption的a标签添加内边距
a:has(figcaption) { 
 padding: 1rem; 
} 

//不包含figcaption的a标签才会添加这个内边距
a:not(:has(figcaption)) { 
   padding: 1rem; 
}

5.10.2 相对视口的长度

• vw：视口宽度
• vh：视口高度
• vmin：视口中的最小值，等于vw或vh中较小的值
• vmax：视口中的最大值，等于vm或vh中较大的值

//高度为浏览器窗口高度90%的模态弹层
.modal { 
 height: 90vh; 
} 

5.11 Web 排版

5.11.1 @font-face

CSS提供了@font-face规则，用于引用在线字体显示文本。

字体资源（免费）：

• Font Squirrel（http://www.fontsquirrel.com/）
• Google: http://www.google.com/webfonts
• Roboto: https://www.fontsquirrel.com/fonts/roboto

5.11.2 通过@font-face 实现 Web 字体

//需要修改路径
@font-face { 
    font-family: 'robotoregular'; 
    src: url('Roboto-Regular-webfont.eot'); 
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embeddedopentype'), 
        url('Roboto-Regular-webfont.woff') format('woff'), 
        url('Roboto-Regular-webfont.ttf') format('truetype'), 
        url('Roboto-Regular-webfont.svg#robotoregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

响应式设计中，使用@font-face唯一一个需要注意的问题就是文件大小。

5.12 CSS3 的新颜色格式及透明度

首先，CSS3新增了两种声明颜色的格式：RGB和HSL。此外，这两种颜色模式还支持alpha通道（RGBA和HSLA）

5.12.1 RGB

.redness { 
 color: rgb(254, 2, 8); 
} 

5.12.2 HSL（Hue Saturation Lightness，色相、饱和度、亮度）

没见过，不管

5.12.3 alpha 通道

为什么放着用了那么多年的可靠的十六进制颜色值不用，突然要使用HSL或RGB颜色值呢？HSL或RGB与十六进制值的区别在于，它们支持透明通道，可以让原来被元素挡住的东西透过来。（也就是支持透明度）

.redness-alpha-rgba { 
 color: rgba(255, 255, 255, 0.8); 
} 

为何不用opacity？
CSS3也支持设置元素的opacity属性，取值范围也是0到1（.1表示10%）。与RGBA和HSLA不同，对元素设置opacity影响整个元素，而RGBA和HSLA则只影响元素特定的方面，比如背景。这样就可以实现元素中不透明的文字和透明的背景。

6 CSS3高级技术

6.1 CSS3 的文字阴影特效

.element { 
 text-shadow: 1px 1px 1px #ccc; 
} 

缩写值的规则是先右后下（当然，你可以将其视为顺时针顺序）。因此，第一个值是阴影的右侧偏移量，第二个值是阴影的下方偏移量，第三个值是模糊距离（阴影从有到无的渐变距离），最后一个则是色值。

要想让阴影往左上方偏移，可以使用负值：

.text { 
 text-shadow: -4px -4px 0px #dad7d7; 
} 

特定情况下去除文字阴影效果：

.text { 
 text-shadow: .0625rem .0625rem 0 #bfbfbf; 
} 
@media (min-width: 30rem) { 
 .text { 
    text-shadow: none; 
 } 
}

在CSS中，对于以0开头的数值，可以将0省去。如0.14s就可以写成.14s

6.1.1 省略 blur 值

不需要给文字阴影添加模糊效果：

.text { 
    text-shadow: -4px -4px #dad7d7; 
}

6.1.2 多文字阴影

.multiple { 
    text-shadow: 0px 1px #fff,4px 4px 0px #dad7d7; 
} 

由于CSS会忽略空白，你可以这样排版以增加可读性。

.text { 
 font-size: calc(100vmax / 40); /* 100 of vh or vw, whichever is larger divided by 40 */ 
 text-shadow: 
     3px 3px #bbb, /* right and down */ 
     -3px -3px #999; /* left and up */ 
} 

6.2 盒阴影

语法： 水平偏移值、垂直偏移值、模糊距离、阴影尺寸，以及阴影颜色。

四个长度值中只有两个是必需的（当最后两个长度值不存在的时候，颜色值会被当作阴影颜色，而0值会被添加到模糊半径上）

.shadow { 
 box-shadow: 0px 3px 5px #444; 
} 

6.2.1 内阴影

默认的box-shadow是设置在元素外部的。另外一个可选关键词inset容许在元素内部使用box-shadow。

.inset { 
 box-shadow: inset 0 0 40px #000; 
}

6.2.2 多重阴影

.box-shadow{
    inset 0 0 30px hsl(0, 0%, 0%), 
    inset 0 0 70px hsla(0, 97%, 53%, 1); 
}

6.3 背景渐变

6.3.1 线性渐变语法

渐变方向默认从顶部开始，最简表达式：

.linear-gradient { 
 background: linear-gradient(red, blue); 
}

加上方向：

.linear-gradient { 
 background: linear-gradient(to top right, red, blue); 
} 

兼容旧式浏览器

.thing { 
 background: red; 
 background: linear-gradient(45deg, red, blue); 
} 

6.6 多张背景图片

.bg { 
 background: 
    url('../img/1.png'), 
    url('../img/2.png'), 
    url('../img/3.png'); 
} 

//还可以添加背景颜色
.bg { 
 background: 
     url('../img/1.png'), 
     url('../img/2.png'), 
     url('../img/3.png') left bottom, black; 
}

6.6.1 背景大小

.bg { 
 background-size: 100% 50%, 300px 400px, auto; 
} 

每张图片的大小（第一个是宽度，第二个是高度）按照它们在背景属性中的顺序声明，用逗号分隔。

• auto：让图片保持其原生大小。
• cover：保持图片比例，拓展至覆盖整个元素。
• contain：保持图片比例，拓展图片让其最长边保持在元素内部。

6.6.2 背景位置

.bg-multi { 
 height: 100vh; 
 width: 100vw; 
 background: 
    url('rosetta.png'), 
    url('moon.png'), 
    url('stars.jpg'); 
 background-size: 75vmax, 50vw, cover; 
 background-position: top 50px right 80px, 40px 40px, top center; 
 background-repeat: no-repeat; 
} 

背景位置默认为左上角。

6.7 高分辨率背景图像

.bg { 
 background-image: url('bg.jpg'); 
} 

//定义图片bg@1_5x.jpg应该使用的最小分辨率为1.5dppx（设备像素与CSS像素比）。
@media (min-resolution: 1.5dppx) { 
 .bg { 
    background-image: url('bg@1_5x.jpg'); 
 } 
}

6.8 CSS 滤镜

box-shadow定义的元素的阴影只能是矩形。可以使用drop-shadow来替代。

.filter-drop-shadow { 
 filter: drop-shadow(8px 8px 6px #333); 
} 

drop-shadow和box-shadow拥有相似的语法；X方向偏移量、Y方向偏移量、模糊大小、阴影尺寸（上述两个值都是可选的）和颜色（同样也是可选的，但是我建议为了效果的一致性，定义一个颜色）

7 SVG与响应式Web设计

除了最小的图片资源，如果可能的话，使用SVG替代JPEG、GIF或者PNG。这样可以产生和分辨率无关的图片，而且大小也比位图图像小得多。

8 CSS3过渡、变形和动画

8.1 什么是 CSS3 过渡以及如何使用它

1. 不能从display: none开始过渡。当某个元素被设为display:none;的时候，事实上它没有被“绘制”在屏幕上，所以没有状态让你进行过渡。
2. 为了创造渐进的效果，你需要修改opacity或者position的值。
3. 其次，并非所有属性都可以进行过渡。

一个应用比较广的写法，给元素添加下边框，又不会像border影响界面布局：

a { 
 font-family: sans-serif; 
 color: #fff; 
 text-indent: 1rem; 
 background-color: #ccc; 
 display: inline-flex; 
 flex: 1 1 20%; 
 align-self: stretch; 
 align-items: center; 
 text-decoration: none; 
 //在box-shadow上，将会耗时1秒，从现存状态切换到悬停状态。
 transition: box-shadow 1s; 
} 

a + a { 
 border-left: 1px solid #aaa; 
} 

a:hover { 
    box-shadow: inset 0 -3px 0 #CC3232; 
} 

8.1.1 过渡相关的属性

• transition-property：要过渡的CSS属性的名字（如background-color、text-shadow或者all，all会过渡所有可以过渡的属性）。
• transition-duration：定义过渡效果持续的时长（用秒进行定义，例如.3s、2s或1.5s）。
• transition-timing-function：定义过渡期间的速度变化（例如ease、linear、ease-in、ease-out、ease-in-out或者cubic-bezier）。
• transition-delay：可选，用于定义过渡开始前的延迟时间。相反，将值设置为一个负数，可以让过渡效果立即开始，但过渡旅程会在半路结束。同样是用秒进行定义，例如.3s、2s或2.5s。

示例：

.style { 
     /*...（其他样式）...*/ 
     transition-property: all; 
     transition-duration: 1s; 
     transition-timing-function: ease; 
     transition-delay: 0s; 
} 

8.1.2 过渡的简写语法

transition: all 1s ease 0s; 

第一个和时间相关的值会被应用给transition-duration，而第二个则会被应用到transition-delay上。

8.1.3 在不同时间段内过渡不同属性

一条规则要实现多个属性过渡：

.style { 
     /* ...（其他样式）... */ 
     transition-property: border, color, text-shadow; 
     transition-duration: 2s, 3s, 8s; 
}

8.2.1 scale 用来缩放元素（放大和缩小）

.scale:hover { 
 transform: scale(1.4); 
} 

8.2.2 translate 在屏幕上移动元素（上下左右）

语法中定义的第一个值是X轴上偏移的距离，第二个是Y轴上偏移的距离。正值会让元素向右或者向下移动，负值则会让元素向左或者向上移动。

如果你只传入一个值，它会被应用到X轴上。如果你想指定一个轴进行移动，可以使用translateX或者translateY。

.translate:hover { 
 transform: translate(-20px, -20px); 
} 

使用translate来居中绝对定位的元素

<div class="outer">
    <div class="inner"></div>
</div>

.outer {
    position: relative;
    height: 400px;
    background-color: #f90;
}

.inner {
    position: absolute;
    width: 200px;
    background-color: #999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

8.2.3 rotate 按照一定角度旋转元素（单位为度）

.rotate:hover { 
 transform: rotate(30deg); 
}

8.2.4 skew 沿X和Y轴对元素进行斜切

.skew:hover { 
 transform: skew(40deg, 12deg); 
}

第一个值是X轴上的斜切，第二个值是Y轴上的斜切。忽略第二个值意味着仅有的值只会应用在X轴上（水平方向）。

8.2.5 matrix（矩阵） 允许你以像素精度来控制变形效果

比较复杂，建议用在线工具：Matrix Construction Set

.matrix:hover { 
 transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); 
}

8.2.6 transform-origin 修改变形原点

注意在CSS里，默认的变形原点（浏览器中作为变形中心的点）是在正中心：元素X轴的50%和Y轴的50%处。这和SVG默认的左上角（或者0 0）是不同的。

transform-origin: 270px 20px;

第一个值是水平方向上的偏移量，第二个值是垂直方向上的偏移量。

如果对transform-origin使用了百分比，那么水平/垂直偏移量都是相对于元素的宽高而言的。

8.3 CSS3 的 3D 变形

一个实现水平和垂直翻转的例子，感觉有用

<div class="flipper">
	<span class="flipper-object flipper-vertical">
		<span class="panel front">The Front</span>
		<span class="panel back">The Back</span>
	</span>
</div>

<div class="flipper">
	<span class="flipper-object flipper-horizontal">
		<span class="panel front">The Front</span>
		<span class="panel back">The Back</span>
	</span>
</div>

.flipper {
	perspective: 400px;	/* 透视 */
	position: relative;
	width: 300px;
	height: 44px;
}

.flipper + .flipper {
	margin-top: 1em;
}

.flipper-object {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: transform 1s;
	transform-style: preserve-3d;	/* 使子元素也保持3D效果 */
}

.panel {
	display: flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	top: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	backface-visibility: hidden;/* 隐藏元素背面 */
}

/* 背面元素默认翻转 */
.flipper-vertical .back {
	transform: rotateX(180deg);
}

.flipper-horizontal .back {
	transform: rotateY(180deg);
}

.back {
	background-color: #CC3232;
}

.front {
	background-color: #739328;
}

.flipper:hover .flipper-vertical {
	transform: rotateX(180deg);
}

.flipper:hover .flipper-horizontal {
	transform: rotateY(180deg);
}

perspective如果你设置了一个比较小的值，如20px，那么3D空间会延伸到距离屏幕只有20px处，这会导致一个非常明显的3D效果。如果设置一个比较大的值，那就意味着3D空间离屏幕很远，3D效果会没有那么明显。

创建3D效果的关键点是transform-styles:preserve-3d。这告诉浏览器，当我们要为这个元素创造变形效果时，它的子元素也保持3D效果。如果我们不在.flipper-object上设置preserve-3d，就永远都看不到翻转元素的背面（红色部分）。

需要使用backface-visibility属性。把它设置为hidden来隐藏元素的背面。

transform3d 属性 在X轴（左/右）、Y轴（上/下）、Z轴（前/后）上移动元素

translate3d中逗号分隔的三个参数分别是X轴上的偏移、Y轴上的偏移、Z轴上的偏移

.flipper:hover .flipper-vertical { 
 transform: rotateX(180deg) translate3d(0, 0, -120px); 
 animation: pulse 1s 1s infinite alternate both; 
} 
.flipper:hover .flipper-horizontal { 
 transform: rotateY(180deg) translate3d(0, 0, 120px); 
 animation: pulse 1s 1s infinite alternate both; 
} 

8.4 CSS3 动画效果

CSS3动画由两部分组成：首先是关键帧声明，然后是在动画属性中使用该关键帧声明。

.flipper:hover .flipper-vertical {
	transform: rotateX(180deg);
	animation: pulse 2s 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5 alternate both;
}

.flipper:hover .flipper-horizontal {
	transform: rotateY(180deg);
	animation: pulse 1s 1s infinite alternate both;
}

/*The animation keyframe*/

@keyframes pulse {
  100% {
		text-shadow: 0 0 5px #bbb;
		box-shadow: 0 0 3px 4px #bbb;
  }
}

在本例中，我们实际定义了（依照定义顺序）使用的关键帧规则的名字（pulse）、动画持续时长（1s）、动画开始延迟（1s，给予按钮足够的时长用于翻转）、动画运行的次数（infinite，无限次）、动画播放方向（alternate，交替，所以动画轮流往复地播放），最后我们想让animation-fill-mode保留动画中无论是顺序播放还是倒序播放后的值（both）。

animation-fill-mode 属性

可以使元素保留动画结束时的值

.fill-mode-forwards {
	animation-fill-mode: forwards;
}

9 表单

9.2 理解 HTML5 表单中的元素

9.2.1 placeholder

为占位符文本添加样式

input:placeholder-shown { 
 color: #333; 
} 

9.2.2 required

required属性可用于多种类型的输入元素来确保表单域中必须输入值。要注意的是，range、color、button和hidden类型的输入元素不能使用required，因为这几种输入类型几乎都有默认值。

9.2.3 autofocus

HTML5的autofocus属性可以让表单在加载完成时即有一个表单域被默认选中，以方便用户输入。

如果多个表单域都添加了autofocus属性，在不同的浏览器上表现是不一致的。例如，在Safari上，最后一个添加autofocus的表单域会被选中，而在Firefox和Chrome上的表现则恰恰相反，它们会选中第一个添加autofocus属性的元素。

还有一点需要注意的是，有的用户习惯使用空格键来让网页进行下滚。如果网页中的表单中含有带有autofocus的表单域，则会阻止空格键的默认行为。此时，敲击空格键会在已聚焦的输入框中输入空格。显然，这样会让用户很懊恼。

使用autofocus属性的时候，要确保只在表单中使用一次，并且了解对那些使用空格滚动的用户的影响。

9.2.4 autocomplete

很多浏览器默认提供自动补全功能来辅助用户输入。以往用户可以在浏览器设置中打开或关闭这项功能，现在我们还能告知浏览器我们不想在某个表单或者表单域上使用自动补全功能。
示例：

<div> 
 <label for="tel">Telephone (so we can berate you if you're wrong)</label> 
 <input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required> 
</div> 

也可以给整个表单（不是fieldset）设置属性来禁用自动补全功能。

<form id="redemption" method="post" autocomplete="off">

9.2.5 list 及对应的 datalist 元素

利用list属性以及对应的datalist元素，可以在用户开始在输入框中输入值的时候，显示一组备选值。下面是一个包含在div中的使用list属性及对应datalist元素的代码示例：

<div>
	<label for="awardWon">Award Won</label>
	<input id="awardWon" name="awardWon" type="text" list="awards">
	<datalist id="awards">
		<select>					
			<option value="Best Picture"></option>
			<option value="Best Director"></option>
			<option value="Best Adapted Screenplay"></option>
			<option value="Best Original Screenplay"></option>
		</select>
	</datalist>
</div>

list属性中的值（awards）同时也是datalist元素的id。这样就可以让datalist与输入框关联起来。虽然并不一定需要将option包裹在select中，但是这样做有助于为老式浏览器提供降级处理。

9.3 HTML5 的新输入类型

9.3.1 email

<div> 
 <label for="email">Your Email address</label> 
 <input id="email" name="email" type="email" placeholder="dwight. schultz@gmail.com" required> 
</div> 

当与required组合使用时，如果提交一个不符合格式的地址，浏览器会生成警告信息。

9.3.2 number

<div> 
 <label for="yearOfCrime">Year Of Crime</label> 
 <input id="yearOfCrime" name="yearOfCrime" type="number" min="1929" max="2015" required> 
</div> 

9.3.3 url

<div> 
 <label for="web">Your Web address</label> 
 <input id="web" name="web" type="url" placeholder="www.mysite.com"> 
</div>

9.3.4 tel

<div> 
 <label for="tel">Telephone (so we can berate you if you're wrong)</label> 
 <input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required> 
</div> 

9.3.5 search

<div> 
 <label for="search">Search the site...</label> 
 <input id="search" name="search" type="search" placeholder= "Wyatt Earp"> 
</div> 

9.3.6 pattern

可以通过pattern属性来使用正则表达性定义用户输入的数据格式。

<div> 
 <label for="name">Your Name (first and last)</label> 
 <input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA- Z] {3,30}" placeholder="Dwight Schultz" required> 
</div> 

9.3.7 color

color输入类型会在支持的浏览器上调出颜色选择器（暂时只是Chrome和Firefox）来让用户选择颜色值（十六进制值）。示例代码如下：

<div> 
 <label for="color">Your favorite color</label> 
 <input id="color" name="color" type="color"> 
</div> 

9.3.8 日期和时间输入类型

1. date

<input id="date" type="date" name="date">

和color类型一样，目前对date提供原生支持的浏览器寥寥无几，大多数浏览器默认将其渲染为标准的文本输入框。

2. month

<input id="month" type="month" name="month"> 

3. week

<input id="week" type="week" name="week">

4. time

<input id="time" type="time" name="time">

9.3.9 范围值

range输入类型会生成一个滑动条。

<input type="range" min="1" max="10" value="5">

问题是默认不支持显示滑动输入值。

9.4 如何给不支持新特性的浏览器打补丁

Webshims Lib
Webshims最便捷的地方就是按需打补丁。如果在原生支持HTML5新特性的浏览器上查看网页，则仅会给网页加入一丁点儿的冗余代码。而对于老版本浏览器，虽然它们需要加载更多的代码（因为它们本身能力不足），但通过相关JavaScript方法的辅助，它们能提供基本一致的用户体验。

首先下载Webshims Lib（http://afarkas.github.io/webshim/demos/）并解压，然后将其中的js-webshim文件夹复制到相应位置。

<script src="js/jquery-2.1.3.min.js"></script> 
<script src="js-webshim/minified/polyfiller.js"></script>
<script> 
 // 引入你需要的功能
 webshim.polyfill('forms'); 
</script>

9.5 使用 CSS 美化 HTML5 表单

9.5.1 显示必填项

标记必填项：

input:required { 
 /* 样式 */ 
} 

标记获取到焦点的必填项：

input:focus:required { 
 /* 样式 */ 
} 

10 实现响应式Web设计

让设计决定断点

首先为最小的视口编写CSS，然后在媒体查询中修改其在较大视口下的表现。

.rule { 
 /* 小型视口样式 */ 
} 
@media (min-width: 40em) { 
 .rule { 
 /* 中型视口样式 */ 
 } 
} 
@media (min-width: 70em) { 
 .rule { 
 /* 大型视口样式 */ 
 } 
}