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

时间 2019-12-07

标签响应 web 设计指南基础栏目 HTML 繁體版

原文原文链接

Web 是广泛存在的，也是无处不在的，Web能够适应任何尺寸的屏幕以及任何使用环境，由于Web有其固有的灵活性和可塑性。css

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

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

流动布局

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

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

布局选项

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

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

　　弹性布局：弹性布局与流动布局相似，只是一般状况下弹性布局会以em来做为单位（1em=16px）。网站

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

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

网格布局

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

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

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

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会致使更高的内存消耗、昂贵的回流以及运行的更慢的网站。

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

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