HTML5 概览进阶篇

构建响应式网站

响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query 的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

可伸缩的图像

默认情况下， 图像显示的尺寸是 HTML 中指定的 width 和 height 属性值。如果不指定这些属性值，图像就会自动按照其原始尺寸显示。此外，你还可以通过 CSS 以像素为单位设置 width 和 height。

显然，当屏幕宽度有限的时候，按原始尺寸显示图像就不一定合适了。使用可伸缩图像技术就可以让图像在可用空间内缩放，但不会超过其本来的宽度。可用空间是由包含图像的元素决定的，它们根据包含它们的元素的尺寸按比例缩放。

.photo-full {
    max-width: 100%;
}

图像缩放的可用空间是由其父元素建立的内容区域。如果父元素有水平方向上的内边距，可用空间就会相应减小。

可以使用 background-size 属性对背景图像进行缩放(对 IE8 无效)。

弹性布局

拥有定宽容器的网页对响应式页面来说并不合适，我们希望页面能进行缩放，并正好适应浏览器视觉区域大小，流式布局就可以做到这一点。

创建弹性布局需要使用百分数宽度，并将它们应用于页面里的主要区域。

元素的百分数宽度基于其父元素提供的可用空间。

.div-flex {
    width: 60%;
}

还可以对元素设置基于百分数的 margin 和 padding 值。

媒体查询

媒体查询增强了媒体类型方法，允许根据特定的设备特性定位样式。 要调整网站的呈现样式，让其适应不同的屏幕尺寸，采用媒体查询特别方便。下面列出了可以包含在媒体查询里的媒体特性 ：

• width/height/device-width/device-height
• orientation/aspect-ratio/device-aspect-ratio
• color/color-index/monochrome
• resolution/scan/grid
• -wbkit-device-pixel-ration/-moz-device-pixel-ration

除了 orientation/scan/grid 以外，上述属性均可添加 min- 和 max- 前缀。

• 指向外部样式表的链接

  <link rel="stylesheet" media="logic type and (feature: value)" href="stylesheet.css" />

• 关于样式表中的媒体查询

  // logic 取值为 only 或 not 或 and
  // type 媒体类型
  // feature 预定义的媒体特性
  @media logic type (feature: value) {
      /* 目标 CSS 样式规则写在这里 */
  }

下面是一个例子

// 仅当媒体类型为 screen 且视觉区域最小宽度为 480px 时加载并使用
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="style-480.css" />

可以使用 and 将多个特性和值的组合串接起来，还可以创建一系列媒体查询（使用逗号分隔每个媒体查询）。在用逗号分隔的媒体查询列表中，如果有一个媒体查询为真，则整个媒体查询列表为真。

<link rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)" href="style.css" />
//
<link rel="stylesheet" media="only print and (color)" href="color-page.css" />

通过媒体查询，可以根据设备的媒体属性应用不同的样式。尽管媒体查询包含了很多功能，但其中 min-width 和 max-width 是创建响应式网页时用的最多的。

有时你可能希望为高像素密度设备设定样式。一种常见的用例是为这样的显示屏准备双倍尺寸(2x)的 sprite，从而让图像显得更锋利。

假设你的 sprite 的原始尺寸是 200 像素 ×150 像素，其中每个图像都用 1 像素分隔。创建一个双倍大小的版本(400 像素 ×300 像素)，每个图像之间就有 2 像素的间隔。同时， sprite 中的每个图像都是原始尺寸的 2 倍。针对高像素密度设备，可以使用下面的媒体查询:

@media (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio:1.25),
    (min-resolution: 120dpi) {
        .class {
            ···
        }
}

需要注意， 就是 Internet Explorer 8 及以下的版本不支持媒体查询。这意味着这些浏览器只会呈现媒体查询以外的样式，即基准样式。

使用 CSS3 进行增强

网站制作者多年来面临的挑战之一就是，使用 CSS 建立丰富布局的选择是有限的。在大多数情况下，要建立丰富的布局，就需要使用额外的 HTML、CSS 及大量图像。这样做的结果就是，页面变得更为复杂，可访问性降低，浏览器需要花费更长的时间下载和显示页面，同时，页面变得更为脆弱，更难维护。

近年来，浏览器快速吸纳了很多新的 CSS3 属性，让上述情况有了改观。如今，仅使用 CSS 创建圆角、渐变和阴影以及调整透 明度等已经变成现实。结果是网页可以使用更少的标记和图像，这样加载的速度也会变快。

渐进增强和 polyfill

渐进增强强调创建所有用户都能访问的基本层面内容和功能，同时为更强大的浏览器提供增强的体验。总结来说，就是网站在不同 Web 浏览器中的外观和行为不一样是完全可以接受的，只要内容是可访问的。

如果你想弥合较弱的浏览器和较强的浏览器之间的差距，可以使用 polyfill 。polyfill 通常使用 JavaScript 来实现，它可以为较弱的浏览器提供一定程度的对 HTML5 和 CSS3 的 API 和属性的支持。同时，当浏览器本身就具有相应的能力时，会不动声色地退而使用官方的支持。需要注意的是这样所通常会对性能产生一定的影响，因为较弱的浏览器运行 JavaScript 的速度要慢很多。

理解厂商前缀

CSS3 规范要达到 W3C 的推荐标准(即定稿)状态要经过数年。浏览器则通常在 W3C 开发标准的过程中就会提前实现这些特性。这样，标准在最终敲定之前就能知道哪些地方还能进一步改进。

在包含某个特性的初始阶段，浏览器通常会使用厂商前缀实现这类特性。这样，每个浏览器都可以引入自己的 CSS 属性支持方式，从而可以获取反馈， 而且一旦标准发生改变也不会造成影响。

每个出浏览器都有自己的前缀：-webkit- (WebKit/Safari/及版本的 Chrome)、-moz- (Firefox)、-ms- (Internet Explorer)、-o-(Opera)。应该将前缀放在 CSS 属性名的前面。

如今大多数情况下，一般只需要 -webkit 前缀，而且并非所有的 CSS3 属性都需要使用为浏览器准备的前缀。

为元素创建圆角

使用 CSS3，可以在不引入额外的标记或图像的情况下，为大多数元素(包括表单元素、 图像，甚至段落文本)创建圆角 。

.all-corners {
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

.left-corner {
    -webkit-border-top-left-radius: 40px;
    border-top-left-radius: 40px;
}

同 border、margin 和 padding 属性一样，border-radius 属性也有简写方式 ：

.corner {
    border-radius: 10px 20px;	// 左上方、右下方设置为 10px，右上方、左下方设置为 20px
    border-radius: 20px 0 0 	// 左上方设置为 20px ，其它为 0
}

创建四个相同的圆角

// r 为圆角半径
.corner {
    -webkit-border-radius: r;
    border-radius: r;
}

创建一个圆角

// r 为圆角半径
.corner-top-left {
    border-top-left-radius: r;
}

.corner-top-right {
    border-top-right-radius: r;
}

.corner-bottom-left {
    border-bottom-left-radius: r;
}

.corner-bottom-right {
    border-bottom-right-radius: r;
}

创建椭圆圆角

// x 为水平方向上的半径大小，y 为垂直方向上的半径大小
.corner-ellipse {
    border-radius: x/y;
}

不支持 border-radius 的旧的浏览器仅会以方角呈现元素。

添加阴影

使用 text-shadow 为段落、标题等元素中的文本添加动态的阴影效果。

text-shadow: x-offset y-offset blur-radius color;   

将 text-shadow 改回默认值

text-shadow: none;

使用 box-shadow 属性则可以为元素本身添加阴影 ，同时还允许使用两个可选的属性 inset 和 spread。

box-shadow: x-offset y-offset blur-radius inset spread color;

多重背景

为单个 HTML 元素指定多个背景是 CSS3 引入的一个特性。 通过减少对某些元素的需求并制定多重背景便可简化 HTML 代码，并让它容易理解和维护。而且多重背景几乎可以用于任何元素。

.weather {
    background-color: #FFF;
    background-image:
        url(fine.png),url(rain.png),
        url(cloud.png),url(fog.png);
    background-positin:
        50% 102%,100% -150px,
        0 -150px,50% 100%;
    background-repeat:
        no-repeat,no-repeat,
        no-repeat,repeat-x;
}
// 或
.weather {
    background-color: #FFF;
    background:
		url(fine.png) no-repeat 50% 102%,
        url(rain.png) no-repeat 100% -150px,
        url(cloud.png) no-repeat 0 -150px,
        url(fog.png) repeat-x 50% 100%;
}

渐变背景

渐变背景也是 CSS3 中的新特性，通过它可以在不使用图像的情况下创建从一种颜色到另一种颜色的过渡。

CSS 渐变是一个背景图像，因此，属性既可以是 background 简记法，也可以是 background-image。应该始终包含一个为旧浏览器准备的基准 background 定义，并放置在渐变背景的定义之前。默认情况下，线性渐变是从上往下渐变的，因此在属性值中不需要指定to bottom。如果要使用相反的方向，则使用to top。

使用CSS创建渐变有两种主要的方式:线性渐变和径向渐变，每种方式都有不同的必选参数和可选参数。除非指定一种颜色向另一种颜色过渡的位置，否则浏览器会自行决定不同颜色之间的过渡。

使用关键字创建对角线方向的渐变：

background: linear-gradient(to bottom right,color,color);
background: linear-gradient(to bottom left,color,color);
background: linear-gradient(to top right,color,color);
background: linear-gradient(to top left,color,color);

指定渐变角度数

background: linear-gradient(90deg,color,color);

数值代表的是圆周上的点的位置:0 代表最顶端的点，90 代表最左边的点，180 代表最底端的点，270 代表最右边的点。

根据渐进增强的原则，最好为不支持背景渐变属性的浏览器提供一个备用选项。在 CSS 中，它可以位于背景渐变规则的前面。

设置不透明度

使用 opacity 属性可以修改元素(包括图像)的透明度。其默认值为 1，可以使用 0.00 至 1.00 之间的两位小数。

opacity: o;