Translated By:
设置视口
对于针对各种设备优化过的网页，其文档标头中必须包含元视口元素。元视口代码会指示浏览器如何对网页尺寸和缩放比例进行控制。
TL;DR
- 使用元视口代码控制浏览器视口的宽度和缩放比例。
- 添加
width=device-width以便与屏幕宽度（以设备无关像素为单位）进行匹配。 - 添加
initial-scale=1以便将 CSS 像素与设备无关像素的比例设为 1:1。 - 确保在不停用用户缩放功能的情况下，您的网页也可以访问。
为了提供最佳体验，移动浏览器会以桌面设备的屏幕宽度（通常大约为 980 像素，但不同设备可能会有所不同）来呈现网页，然后再增加字体大小并将内容调整为适合屏幕的大小，从而改善内容的呈现效果。对用户来说，这就意味着，字体大小可能会不一致，他们必须点按两次或张合手指进行缩放，才能查看内容并与之互动。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
使用元视口值 width=device-width 指示网页与屏幕宽度（以设备无关像素为单位）进行匹配。这样一来，网页便可以重排内容，使之适合不同的屏幕大小（从较小的手机到较大的桌面设备显示器，不一而足）。
有些浏览器会在旋转到横向模式时保持固定的网页宽度，然后通过缩放（而不是重排）填满屏幕。添加属性 initial-scale=1 会指示浏览器在不考虑设备方向的情况下，指示浏览器将 CSS 像素与设备无关像素的比例设为 1:1，并允许网页完全占用横向宽度。
确保视口可以访问
除了设置 initial-scale 外，您还可以在视口上设置以下属性：
minimum-scalemaximum-scaleuser-scalable
但是，设置后，这些属性可以停用用户缩放视口的功能，可能会造成网页访问方面的问题。
调整内容大小，使其适合视口
无论在桌面设备上还是在移动设备上，用户都习惯上下滚动网站，而不是横向滚动，因此，如果用户必须横向滚动或缩小页面才能查看整个网页，那么这将给用户带来糟糕的体验。
TL;DR
- 请勿使用较大的固定宽度元素。
- 在任何视口宽度下，内容均应正常显示。
- 使用 CSS 媒体查询为不同尺寸的屏幕应用不同样式。
使用 meta viewport 代码开发移动版网站时，开发者很容易在无意间创建出不太适合指定视口的网页内容。例如，如果图片宽度大于视口宽度，那么就会导致视口横向滚动。您应该调整此内容，使其适合视口内的宽度，以便用户无需横向滚动。
由于不同设备（例如手机和平板电脑，甚至不同手机之间）的屏幕尺寸和宽度（以 CSS 像素为单位）差别很大，因此内容不应只在特定视口下正常显示。
为网页元素设置较大的 CSS 绝对宽度（如下例所示）会导致 div 因过宽而不适合窄视口设备（例如，iPhone 等宽度为 320 CSS 像素的设备）。因此，请改为使用相对宽度值，例如 width: 100%。同样请注意，使用较大的绝对定位值可能会使元素脱离小屏幕上的视口。
将 CSS 媒体查询用于自适应设计
媒体查询是可应用于 CSS 样式的简单过滤器。有了这些过滤器，我们可以根据设备呈现内容的特点轻松更改样式，包括显示屏类型、宽度、高度、方向甚至是分辨率。
TL;DR
- 媒体查询可用于根据设备特点应用样式。
- 优先使用
min-width（而非min-device-width），以确保实现最宽阔的视觉体验。 - 为元素使用相对尺寸，以免破坏版式完整性。
例如，您可以将打印必需的所有样式放在打印媒体查询中：
<link rel="stylesheet" href="print.css" media="print">
除了在样式表链接中使用 media 属性之外，我们还可以通过另外两种方法应用可以嵌入 CSS 文件的媒体查询：@media 和 @import。出于性能方面的考虑，我们建议开发者优先考虑使用前两种方法，尽量避免使用 @import 语法（请参阅避免 CSS 导入）。
@media print {
/* print style sheets go here */
}
@import url(print.css) print;
不同媒体查询适用的逻辑并不是互斥的，因此，开发者可以根据 CSS 中优先级的标准规则，应用满足生成的 CSS 区块标准的任何过滤器。
根据视口大小应用媒体查询
通过媒体查询，我们可以打造自适应体验，使特定样式可应用于小屏幕、大屏幕和介于两者之间的屏幕。通过媒体查询语法，我们可以创建可根据设备特点应用的规则。
@media (query) {
/* CSS Rules used when query matches */
}
尽管我们可以查询多个不同的项目，但自适应网页设计最常使用的项目为：min-width、max-width、min-height 和 max-height。
| 属性 | 结果 |
|---|---|
min-width |
当任意浏览器宽度大于查询中定义的值时适用的规则。 |
max-width |
当任意浏览器宽度小于查询中定义的值时适用的规则。 |
min-height |
当任意浏览器高度大于查询中定义的值时适用的规则。 |
max-height |
当任意浏览器高度小于查询中定义的值时适用的规则。 |
orientation=portrait |
高度大于或等于宽度的任意浏览器适用的规则。 |
orientation=landscape |
宽度大于高度的任意浏览器适用的规则。 |
我们通过一个示例了解一下：
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
@media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}
.desc:after {
content:" In fact, it's between 500px and 600px wide.";
}
}
</style>
- 当浏览器宽度介于 0 像素和 640 像素之间时，系统将会应用 max-640px.css。
- 当浏览器宽度介于 500 像素和 600 像素之间时，系统将会应用 @media。
- 当浏览器宽度为 640 像素或大于此值时，系统将会应用 min-640px.css。
- 当浏览器宽度大于高度时，系统将会应用 landscape.css。
- 当浏览器高度大于宽度时，系统将会应用 portrait.css。
min-device-width 注意事项
尽管开发者也可以根据 -device-width 创建查询，但是我们强烈建议不要这么做*。
这两种代码的差别虽然不明显但却十分重要：min-width 以浏览器窗口尺寸为依据，而 min-device-width 却是以屏幕尺寸为依据。很遗憾，有些浏览器（包括旧版 Android 浏览器）可能无法正确报告设备宽度，反而会以预期的视口宽度报告屏幕尺寸（以设备像素为单位）。
此外，使用 *-device-width 会阻止内容适应允许窗口调整大小的桌面设备或其他设备，因为该查询基于设备的实际大小，而非浏览器窗口大小。
使用相对单位
与固定宽度的版式相比，自适应设计的主要概念基础是流畅性和比例可调节性。使用相对衡量单位有助于简化版式，并防止无意间创建对视口来说过大的组件。
例如，在顶级 div 上设置 width: 100% 可以确保其横跨视口的宽度，对视口来说既不会太大也不会太小。无论设备是宽度为 320 像素的 iPhone、宽度为 342 像素的 Blackberry Z10，还是宽度为 360 像素的 Nexus 5，div 均会适合这些屏幕。
此外，使用相对单位可让浏览器根据用户缩放程度呈现内容，而无需为网页添加横向滚动条。
Not recommended — fixed width
div.fullWidth {
width: 320px;
margin-left: auto;
margin-right: auto;
}
Recommended — responsive width
div.fullWidth {
width: 100%;
}
如何选择断点
尽管根据设备类定义断点的方法可能很有用，但请慎用这种方法。如果根据具体设备、产品、品牌名称或现今正在使用的操作系统定义断点，后期维护起来可能会困难重重。相反，内容本身应该确定版式调整方式，使其适合自己的容器。
TL;DR
- 根据内容创建断点，绝对不要根据具体设备、产品或品牌来创建。
- 从针对最小的移动设备进行设计入手，然后随着屏幕类型不断增加而逐渐改善体验。
- 使每行的文字最多为 70 或 80 个字符左右。
以从小屏幕开始、不断扩展的方式选择主要断点
先针对小屏幕尺寸进行内容设计，然后扩展至不同尺寸的屏幕，直到必须添加断点为止。如此一来，您便可以根据内容优化断点，并使断点数量降至最低。
我们来分析一下在开头部分看到的示例天气预报。 首先使天气预报在较小的屏幕上呈现效果良好。
接下来，调整浏览器大小，直到元素之间的空间过大，天气预报根本无法正常显示为止。具体应调整到多大是由自己主观决定的，但超过 600 像素肯定就过宽了。
要在 600 像素处插入断点，请新建两个样式表，一个在浏览器不超过 600 像素时使用，另一个在超过 600 像素时使用。
<link rel="stylesheet" href="weather.css"> <link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css"> <link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">
最后，重新设计 CSS。在本例中，我们已将常用的样式（例如字体、图标、基本定位和颜色）放入 weather.css。然后，针对小屏幕的特定版式会放入 weather-small.css，而大屏幕样式则放入 weather-large.css。
必要时选择小断点
除了选择主要断点使版式发生重大变化外，做出适当调整产生微小变化的做法也很有用。例如，进行以下调整可能会很有用：在主要断点之间调整某个元素的边距或内边距，或增加字体大小使其在版式中看起来更自然。
首先优化小屏幕版式。在本例中，当视口宽度超过 360 像素时，我们来增加字体大小。接下来，当有足够的空间时，我们可以将高温和低温分隔开，使其在同一行中显示，而不是以上下排列的形式显示。然后，我们来调大天气图标。
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
同样，如果是大屏幕，我们最好限制天气预报面板的宽度，使其不会占用整个屏幕宽度。
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
优化文本，提高可读性
传统的可读性理论建议：理想栏目的每一行应该包含 70 到 80 个字符（大约 8 到 10 个英文单词），因此，每次文本块宽度超过 10 个单词时，就应考虑添加断点。
我们来深入分析一下上述博文示例。在较小的屏幕上，大小为 1em 的 Roboto 字体可以使每行完美地呈现 10 个单词，而在较大的屏幕上就需要添加断点了。在本例中，如果浏览器宽度超过了 575 像素，那么内容的理想宽度是 550 像素。
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
绝不能完全隐藏内容
在根据屏幕大小选择要隐藏或显示的内容时请务必谨慎。 不要只是因为内容无法适合屏幕而将其隐藏。屏幕大小并非确定用户需求的决定性因素。例如，如果去除天气预报中的花粉统计数据，那么对春天容易过敏的用户来说就是非常严重的问题，因为这些用户要根据这类信息决定是否外出。