响应式Web设计简介：伪元素，媒体查询等

本文概述

响应式网页设计方法
响应式设计中的媒体查询
“智能变焦”
页面宽度
伪元素
那么, 我应该从哪里开始呢？
其他自适应设计元素
关于流体网格系统的几句话
总结

如今, 你的网站将受到各种各样的设备的访问：配备大型显示器的台式机, 中型笔记本电脑, 平板电脑, 智能手机等。

为了获得最佳的前端工程师用户体验, 你的站点应根据这些不同的设备(即, 不同的屏幕分辨率和尺寸)来调整其布局。响应用户设备形式的过程称为(你猜对了)响应式网页设计(RWD)。

为什么值得花时间研究自适应Web设计示例并将你的重点转移到RWD？举例来说, 有些网页设计师将自己的工作变成现实, 以确保在所有浏览器上都能获得稳定的用户体验, 并经常花几天时间来解决Internet Explorer的小问题。

这是一种愚蠢的做法。

一些Web设计人员花了几天时间来解决Internet Explorer的小问题, 而将其移动用户留为二手访问者。这是一种愚蠢的做法。

Mashable称2013为响应式网页设计之年。为什么？他们超过30％的流量来自移动设备。他们预计, 这一数字到年底可能会达到50％。在整个网络中, 2013年, 整个网络流量中有17.4％来自智能手机。例如, 与此同时, Internet Explorer的使用仅占所有浏览器流量的12％, 比去年同期下降了约4％(根据到W3Schools)。如果你要针对特定的浏览器而不是针对全球智能手机群体进行优化, 那么你就错过了森林。在某些情况下, 这可能意味着成功与失败之间的差异-响应式设计会影响转化率, SEO, 跳出率等。

响应式网页设计方法

关于RWD的普遍误解是, 不只是调整网页的外观；相反, 重点应该放在逻辑上调整你的站点以在不同设备上使用。例如：使用鼠标不能提供与触摸屏相同的用户体验。你不同意吗？你的响应式移动设备布局与台式机布局应反映出这些差异。

同时, 你不希望针对可能会在其上浏览的数十种不同屏幕尺寸中的每一种完全重写你的网站-这种方法简直是行不通的。相反, 解决方案是实施灵活的响应式设计元素, 这些元素使用相同的HTML代码来调整以适应用户的屏幕尺寸。

从技术角度来看, 解决方案在于该响应式设计教程中：使用CSS媒体查询, 伪元素, 灵活的集合网格布局和其他工具来动态调整至给定的分辨率。

响应式设计中的媒体查询

媒体类型首先出现在HTML4和CSS2.1中, 从而可以为屏幕和打印放置单独的CSS。这样, 就可以针对页面的计算机显示和打印输出设置不同的样式。

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

@media screen {
    * {
        background: silver
    }
}

在CSS3中, 你可以根据页面宽度定义样式。由于页面宽度与用户设备的大小相关, 因此此功能使你可以为不同的设备定义不同的布局。注意：所有主要浏览器均支持媒体查询。

通过设置以下基本属性可以实现此定义：最大宽度, 设备宽度, 方向和颜色。其他定义也是可能的。但是在这种情况下, 要注意的最重要的事情是最小分辨率(宽度)和方向设置(横向与纵向)。

下面的响应式CSS示例显示了针对页面宽度启动某个CSS文件的过程。例如, 如果480px是当前设备屏幕的最大分辨率, 则将应用main_1.css中定义的样式。

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

我们还可以在同一CSS样式表中定义不同的样式, 以便仅在满足某些约束时才使用它们。例如, 仅当当前设备的宽度大于480px时, 才使用响应式CSS的这一部分：

@media screen and (min-width: 480px) {
    div {
        float: left;
        background: red;
    }
    .......
}

“智能变焦”

移动浏览器使用所谓的”智能缩放”为用户提供”卓越”的阅读体验。基本上, 智能缩放用于按比例缩小页面大小。这可以通过两种方式体现出来：(1)用户启动的缩放(例如, 在iPhone屏幕上点按两次以放大当前网站), 以及(2)最初在其上显示网页的放大版本加载。

鉴于我们只能使用响应式媒体查询来解决智能缩放可能针对的任何问题, 因此通常希望(甚至有必要)禁用缩放并确保页面内容始终填充浏览器：

<meta name="viewport" content="width=device-width, initial-scale=1" />

通过将initial-scale设置为1, 我们可以控制初始页面缩放级别(即页面加载时的缩放量)。如果你将网页设计为具有响应能力, 那么流畅, 动态的布局应以智能方式填充智能手机屏幕, 而无需任何初始缩放。

另外, 我们可以使用user-scalable = false完全禁用缩放。

页面宽度

假设你要提供三种不同的响应式页面布局：一种用于台式机, 一种用于平板电脑(或笔记本电脑), 另一种用于智能手机。你应将哪个页面尺寸作为截止点(例如480像素)？

不幸的是, 尚无针对目标页面宽度的定义标准, 但经常使用以下示例响应值：

320像素
480像素
600像素
768像素
900像素
1024像素
1200像素

但是, 存在许多不同的宽度定义。例如, ” 320及更高版本”具有5个默认的CSS3媒体查询增量：480、600、768、992和1382px。连同此响应式Web开发教程中的示例, 我可以列举至少十种其他方法。

使用这些合理的增量集中的任何一组, 你都可以定位大多数设备。在实践中, 通常无需单独处理所有上述页面宽度示例-七个不同的分辨率可能会显得过高。以我的经验, 最常用的是320px, 768px和1200px。这三个值分别足以分别定位智能手机, 平板电脑/笔记本电脑和台式机。

伪元素

在上一个示例的响应式媒体查询的基础上, 你可能还希望根据用户设备的大小以编程方式显示或隐藏某些信息。幸运的是, 这也可以使用纯CSS完成, 如下面的教程所述。

对于初学者来说, 在减少空间几乎总是不足的智能手机布局的屏幕上元素的数量时, 隐藏一些元素(显示：无；)可能是一个很好的解决方案。

但除此之外, 你还可以利用CSS伪元素(选择器)发挥创意, 例如：before和：after。注意：再次, 所有主要的浏览器都支持伪元素。

伪元素用于将特定样式应用于HTML元素的特定部分, 或选择元素的特定子集。例如, ：first-line伪元素可让你仅在特定选择器的第一行上定义样式(例如p：first-line将应用于所有ps的第一行)。同样, 通过a：visited伪元素, 你可以定义所有样式, 就像用户先前访问的链接一样。显然, 这些可以派上用场。

这是一个简单的响应式设计示例, 其中我们为登录按钮创建了三种不同的布局, 分别针对台式机, 平板电脑和智能手机。在智能手机上, 我们将有一个单独的图标, 而平板电脑将带有相同的图标, 并带有”用户名”。最后, 对于台式机, 我们还将添加一条简短的说明性消息(“插入你的用户名”)。

.username:after {
    content:"Insert your user name";
}
@media screen and (max-width: 1024px) {
    .username:before {
        content:"User name";
    }
}
@media screen and (max-width: 480px) {
    .username:before {
        content:"";
    }
}

仅使用：before和：after伪元素, 我们实现了以下目标：

有关伪元素神奇的更多信息, 克里斯·科耶尔(Chris Coyier)在CSS-Tricks上有不错的文章。

那么, 我应该从哪里开始呢？

在本教程中, 我们为响应式网页设计建立了一些构建块(即媒体查询和伪元素), 并分别列出了一些示例。我们从这里去哪里？

你应该采取的第一步是将网页的所有元素组织成各种屏幕尺寸。

看一下上面显示的桌面版。在这种情况下, 左侧的内容(绿色矩形)可以用作某种主菜单。但是, 当使用分辨率较低的设备(例如平板电脑或智能手机)时, 以全宽显示此主菜单可能是有道理的。使用媒体查询, 你可以实现以下行为：

@media screen and (max-width: 1200px) {
    .menu { 
        width: 100%;
    }
}

@media screen and (min-width: 1200px) {
    .menu {
        width: 30%;
    }
}

不幸的是, 随着你的前端变得越来越复杂, 这种基本方法通常是不够的。由于网站的内容组织通常在移动版本和桌面版本之间存在很大差异, 因此用户体验最终不仅取决于响应CSS的使用, 还取决于HTML和JavaScript的使用。

在确定不同设备的响应式布局时, 几个关键要素很重要。与桌面版拥有足够的内容空间不同, 智能手机的开发要求更高。与以往相比, 有必要对特定内容进行分组并按层次定义各个部分的重要性。

对于智能手机, 对特定内容进行分组并按层次定义各个部分的重要性比以往任何时候都更为重要。

内容的各种用途也很重要。例如, 当你的用户有鼠标时, 他们可以将光标设置在某些元素上方以获取更多信息, 因此你(作为Web开发人员)可以留下一些信息以这种方式收集-但这不会用户使用智能手机时的情况。

此外, 如果你在网站上留下了一些按钮, 然后这些按钮在智能手机上呈现的大小比通常的手指要小, 那么你的网站使用情况和感觉就会变得不确定。请注意, 在上图中, 标准的Web视图(在左侧)使某些元素在较小的设备上完全不可用。

这样的行为也会增加用户出错的机会, 从而降低用户体验。实际上, 这可能表现为页面浏览量减少, 销售量减少和整体参与度降低。

其他自适应设计元素

使用媒体查询时, 应牢记所有页面元素的行为, 而不仅仅是要定位的那些元素, 尤其是在使用流体网格时, 在这种情况下(与固定尺寸相对), 页面将在任何给定的位置完全填充瞬间, 按比例增加和减少内容大小。由于宽度是按百分比设置的, 因此在这种流畅的布局下, 图形元素(即图像)可能会变形和扭曲。对于图像, 一种解决方案如下：

img {
    max-width: 100%
}

其他要素应以类似方式处理。例如, 在RWD中, 图标的一个很好的解决方案是使用IconFonts。

关于流体网格系统的几句话

当我们讨论完全设计适应的过程时, 我们通常会从用户的角度看待最佳的观看体验。此类讨论应包括最大程度的便利使用, 元素重要性(基于可见页面区域), 便利阅读和直观导航。在这些类别中, 最重要的组成部分之一是内容宽度调整。例如, 所谓的流体网格系统具有设定元素, 即基于相对宽度的元素占整个页面的百分比。这样, 响应式网页设计系统中的所有元素都会自动根据页面大小进行调整。

尽管这些流体网格系统与我们在此处讨论的内容紧密相关, 但它们实际上是一个完全独立的实体, 需要额外的教程来详细讨论。因此, 我将仅提及一些支持这种行为的主要框架：Bootstrap, Unsemantic和Brackets。