响应式网页设计简介：伪元素、媒体查询等

如今，您的网站将被各种各样的设备访问：带有大显示器的台式机、中型笔记本电脑、平板电脑、智能手机等等。

作为前端工程师，为了获得最佳的用户体验，您的站点应该调整其布局以响应这些不同的设备（即，它们不同的屏幕分辨率和尺寸）。 响应用户设备形式的过程被称为（你猜对了）响应式网页设计（RWD）。

为什么值得花时间研究响应式网页设计示例并将注意力转移到 RWD？ 例如，一些网页设计师将确保跨所有浏览器的稳定用户体验作为他们毕生的工作，他们经常花费数天时间解决 Internet Explorer 的小问题。

这是一种愚蠢的做法。

Mashable 将 2013 年称为响应式网页设计年。 为什么？ 他们超过 30% 的流量来自移动设备。 他们预计到今年年底这一数字可能达到 50%。 在整个网络中，2013 年 17.4% 的网络流量来自智能手机。同时，例如，Internet Explorer 的使用仅占所有浏览器流量的 12%，比去年同期下降了约 4%（根据到 W3 学校）。 如果您正在针对特定浏览器进行优化，而不是针对全球智能手机人口进行优化，那么您就是只见树木不见森林。 在某些情况下，这可能意味着成功与失败之间的差异——响应式设计对转化率、搜索引擎优化、跳出率等都有影响。

响应式网页设计方法

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 中，您可以根据页面宽度定义样式。 由于页面宽度与用户设备的大小相关，因此此功能允许您为不同的设备定义不同的布局。 注意：所有主流浏览器都支持媒体查询。

这个定义可以通过基本属性的设置来实现： max-width 、 device-width 、 orientation和color 。 其他定义也是可能的； 但在这种情况下，需要注意的最重要的事情是最小分辨率（宽度）和方向设置（横向与纵向）。

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

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

我们还可以在同一个 CSS 样式表中定义不同的样式，以便仅在满足某些约束时才使用它们。 例如，我们的响应式 CSS 的这一部分只有在当前设备的宽度超过 480 像素时才会使用：

 @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 及以上有五个默认的 CSS3 媒体查询增量：480、600、768、992 和 1382 像素。 除了本响应式 Web 开发教程中的给定示例外，我还可以列举至少十种其他方法。

使用这些合理的增量集，您可以定位大多数设备。 在实践中，通常不需要单独处理所有上述页面宽度示例——七种不同的分辨率可能是多余的。 根据我的经验，320px、768px 和 1200px 是最常用的； 这三个值应该足以分别针对智能手机、平板电脑/笔记本电脑和台式机。

伪元素

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

对于初学者来说，隐藏一些元素（ display: none; ）在减少智能手机布局的屏幕元素数量时可能是一个很好的解决方案，因为智能手机布局几乎总是空间不足。

但除此之外，您还可以使用 CSS 伪元素（选择器）获得创意，例如:before和:after 。 注意：再一次，所有主流浏览器都支持伪元素。

伪元素用于将特定样式应用于 HTML 元素的特定部分，或选择元素的某个子集。 例如， :first-line伪元素允许您仅在某个选择器的第一行定义样式（例如， p:first-line将应用于所有p的第一行）。 类似地， a:visited伪元素将允许您在所有a用户先前访问过的链接的 a 上定义样式。 显然，这些可以派上用场。

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

 .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。

结论

直到最近，网站优化还是一个专门用于根据不同 Web 浏览器定制功能的术语。 除了我们今天面临的不同浏览器标准不可避免的斗争之外，这个术语现在还假设通过响应式网页设计适应设备和屏幕尺寸。 要在现代网络上剪裁，您的网站不仅要知道谁在查看它，还要知道如何查看它。