响应式 Web 设计指南「基础篇」

Web 是普遍存在的，也是无处不在的，Web可以适应任何尺寸的屏幕以及任何使用环境，因为Web有其固有的灵活性和可塑性。

Web 再也不是某一平台独有的矿藏，而是真正成为了一张名副其实的大网，并将各种设备彼此连接在一起。

而作为开发人员要想不被这愈发迅猛的设备大潮所吞噬，就必须抛弃之前的一切，转而学会适应它、尊重它。

流动布局

随着越来越多设备的涌现，人们越来越难以继续忽略Web所固有的灵活性和不可预测性。

而作为拥抱灵活性的第一步，就是要为我们的站点创建流动布局，并藉此来对不同尺寸的设备屏幕做出不同的相应。

布局选项

　　固定布局：在固定布局中，页面宽度会被指定为特定大小的像素，其中960px是使用最为广泛的宽度。

　　流动布局：在流动布局中，度量的单文不再是像素，而是变成了百分比，这样可使页面具有可变的特性。

　　弹性布局：弹性布局与流动布局类似，只是通常情况下弹性布局会以em来作为单位（1em=16px）。

　　混合布局：最后一种选择就是混合布局，它结合了上面提到的两种或两种以上的布局方式。

那么到底哪种方式才是最具响应性的呢？从根本上来说，这取决于你特定的项目。不过，在大多数情况下，流动布局、弹性布局...相比固定布局更能适应变化。

网格布局

网格有助于实现站点的平衡、间距以及组织结构。一个实现良好的网格系统会使你的站点井井有条，同时还可以提高页面的可读性和可浏览性。

使用网格要做的第一件事就是确定画布。你得先把画布划分出若干你需要的列，然后才能继续后面的工作。

让你的内容来决定你的站点结构是一种很好的设计方法，而且这样做也是非常实用的。从一开始就让网格配合内容，这会让每个页面的设计都更具粘性。

box-sizing: border-box 可以让浏览器将 padding 的值算在已经定义好的元素宽度内部。通过这一属性，能够使得设计流动布局变得更加容易。

媒介查询

流动布局是个伟大的开端，它消除了固定布局中的种种限制，并使站点能在不同分辨率的屏幕上都能漂亮地展示，但是它也只能带你走这么远。

媒介查询可以让你根据在特定环境下查询到的各种属性值（比如屏幕分辨率）来决定应用什么样的样式。通过使用媒介查询，就可以根据屏幕尺寸对页面做出相应调整了。

视口标签和属性

视口就是浏览器的可视区域，也指浏览器的宽度。

视口标签的形式非常简单，只需指定使用的视口元标签，然后列出一些声明即可：

<meta name="viewport" content="width=device-width" />

该元标签需要放在 HTML 文件的 head 标签中：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>

　　width：width 声明可以让你将视口设置为某一特定的宽度，或者设置为设备屏幕的宽度。在 width 声明中使用 device-width 是最佳的选择。

　　height：与 width 对应的就是 height，height 允许你指定一个特定的高度。事实上 height 并不常用，除非你不想让页面垂直滚动。

　　user-scalable：user-scalable 声明会告诉浏览器，是否允许用户在页面上进行缩放。在那些追求完美到像素的设计中，常常将user-scalable属性设置为no。

　　initial-scale：通过给 initial-scale 赋值为 0.1（10%）到 10.0（1000%）之间的某个数，来设置页面初始化的缩放层级。

　　maximum-scale：maximum-scale 声明可以告诉浏览器允许用户放大页面到什么程度。如果将 maximum-scale 设置为1.0，同样可以禁止用户缩放页面。

　　minxmum-scale：minimum-scale 声明会告知浏览器允许用户将页面缩小到什么程度，其默认值是0.25（25%）。

媒介查询结构

媒介查询可以通过询问浏览器来确定特定的表达式是否为真。如果为真，那么就加载一些特殊的、适用于这种情况的样式，从而达到调整布局的目的。

媒介查询的一般形式为：

@media [not|only] type [and] (expr) {
    rule
}
 
type：媒介类型，特定的目标设备类型
expr：媒介表达式，测试某一特性是否为真
only：逻辑关键词，例如 and、or、not、only
rule：规则，调整显示效果的基本样式

css中定义了10种不同的媒介类型，每一种媒介类型都会告诉浏览器是否要加载特定的样式表。但在实际的使用过程中，你会发现你几乎只会用到 screen（彩色计算机屏幕）。

样式表中的媒介查询语句如下：

<style>
    @media screen {
        h1 {
            font-size: 1.2rem;
        }
    }
</style>

此外，你也可以采用外部样式文件的形式，并在link元素内指定媒介属性：

<link rel="stylesheet" href="screen.css" media="screen" />

就媒介类型本身而言，它只允许你指定设备的类型，但是为了对页面进行进一步细分，你需要缩小设备的范围，这时就该媒介表达式登场了。

媒介表达式

媒介查询的强大之处在于它们能够利用表达式来检测出设备不同特性的真假值。

例如通过下面这条简单的声明，你就可以判断出设备视口的宽度是否大于320px：

@media screen and (min-width:320px) {
    /* css rule */
}

这条语句首先会检测访问页面的设备是否属于 screen，然后测试设备的视口宽度，其中 min- 前缀会保证视口宽度至少为320px。

常用的媒介特性有 width（设备显示区域的宽度）、height（设备显示区域的高度）、orientation（指定设备处于竖直或水平状态）、resolution（设备的分辨率dpi）。

逻辑关键字

除了媒介类型和媒介表达式外，你还可以通过使用可选的关键字，来使媒介查询语句具有更强大的功能。

　　AND：你可以使用 and 来测试多个表达式。 @media screen and (color)

　　NOT：对整个表达式的结果取反，而不是对部分表达式的结果取反。 @media not screen and (color)

　　OR：使用逗号在一系列表达式中的某一个为真时，加载某些样式表。 @media screen and (color), print and (color)

　　ONLY：对于部分老式浏览器，使用only关键字可以隐藏媒介查询。 @media only screen and (color)

规则

媒介查询中的最后一块内容，就是你要应用的实际样式规则。

你可以在这里写基本的CSS规则，它们唯一的特殊之处就是位于媒介查询里面：

@media only screen and (min-width: 800px) and (max-width:1000px) {
    body {
        font-size: 1.2rem;
        font-family: arial;
    }
}

内嵌样式与外部样式

媒介查询既可以写在页面内部，也可以通过 link 元素的 media 属性被包含到页面中来。

<style>
    @media only screen and (min-width:1200px) {
        a {
            text-decoration: underline;
        }
    }
</style>
 
<link href="style.css" media="only screen and (min-width:1200px)" />

无论内嵌样式或外部样式是否会用到，所有的样式都会被下载下来。

外部媒介查询的优势在于文件可以变得很小，进而利于维护。缺点是额外的HTTP请求会使站点变慢。

响应式设计对性能的影响

响应式设计能够解决很多问题，但同时它也很容易在诸如性能、维护这些问题中迷失方向。在这些问题中，性能问题显得尤为重要。

因为在你构建用户体验中，性能是其中一个不可或缺的标准组件，而且很多案例研究表明，性能影响着你的用户的满意度，性能也是你最重要的一道防线。

虽然每个网站的情况都不相同，但有几点原因几乎是所有加载过慢的网站所共有的：

　　下载并隐藏：display:none 虽然可以隐藏页面内容，但是被隐藏的资源依旧会被下载，浏览器仍然需要遍历所有资源，DOM元素也依旧会被创建。

　　下载并缩小：响应式设计中使用的高质量图片，远远超过小屏幕设备的显示能力，这样一来，那些多余的字节就这样被白白浪费掉了。

　　额外的DOM：尽管有些内容会被隐藏，但浏览器还是会解析并处理隐藏部分的DOM。而且复杂的DOM会导致更高的内存消耗、昂贵的回流以及运行的更慢的网站。

这些问题都不容易解决，因为它们是由现有的响应式设计和浏览器的工作模式所共同决定的。

总而言之，响应式设计是一种强劲的、向前思考的技术，但同时它对性能也有着显著的影响。要确信你已经明白了这些挑战，并且要在设计的过程中避免它们。