Nowadays, 您的网站将被各种各样的设备访问:带有大显示器的台式机, mid-sized laptops, tablets, smartphones, and more.

实现最佳的用户体验 front-end engineer，您的网站应该调整其布局，以响应这些不同的设备(如.e.，到不同的屏幕分辨率和尺寸，由CSS中的媒体查询控制. The process of responding 到用户设备的形式被称为(你猜对了) responsive web design (RWD).

为什么它值得你花时间学习 responsive web design 媒体查询示例，并将注意力转移到RWD? Some web designers, for example, 相反，让它成为他们一生的工作，以确保在所有浏览器上都有稳定的用户体验, 经常花几天时间用ie浏览器解决小问题.

这是一种愚蠢的做法.

一些网页设计师花了好几天的时间来解决ie浏览器的小问题，让他们的手机用户成为二手访问者. 这是一种愚蠢的做法.

Mashable称2013年为响应式网页设计年. Why? 超过30%的流量来自移动设备. 他们预计，到今年年底，这一数字可能达到50%. 在整个网络中， 17.2013年，4%的网络流量来自智能手机. 与此同时，以ie浏览器为例，其使用量仅占所有浏览器的12% browser 流量较去年同期下降了约4% W3Schools). 如果你正在针对特定的浏览器进行优化, 而不是全球智能手机用户, 你这是只见树木不见森林. And in some cases, 这可能意味着成功和失败之间的差异——响应式设计的含义 conversion rates, SEO, bounce rates, and more.

响应式网页设计方法

What’s commonly glossed over about RWD is that it’s not just about adjusting the appearance of your webpages; instead, 重点应该是在逻辑上调整您的站点以适应不同设备的使用. 例如:使用鼠标不能提供与触摸屏相同的用户体验. Don’t you agree? 你的响应式手机vs. 桌面布局应该反映网站桌面中定义的这些差异, tablet, 或者移动媒体查询.

At the same time, 您不希望针对可能查看的数十种不同屏幕尺寸中的每一种完全重写您的站点—这种方法根本不可行的. Instead, 解决方案是实现灵活的响应式设计元素，使用相同的HTML代码来调整用户的屏幕大小.

从技术角度来看，解决方案在于这个响应式设计教程:使用 CSS media queries, pseudo-elements灵活的设置网格布局，以及其他工具来动态调整到给定的分辨率.

响应式设计媒体查询:例子

媒体类型首次出现于 HTML4 and CSS2.1，它允许在屏幕和打印中放置单独的CSS. In this way, 可以在-à-vis的打印输出中为一个页面的计算机显示设置单独的样式.

or

@media screen {
    * {
        background: silver
    }
}

在CSS3中，您可以根据页面宽度定义样式. 因为页面宽度与用户设备的大小有关, 因此，此功能允许您为不同的设备定义不同的布局. 注意:媒体查询由 all major browsers.

这个定义可以通过设置基本属性实现: max-width, device-width, orientation, and color. Other definitions are possible as well; but in this, 在这种情况下，最重要的是要注意最小分辨率(宽度)和方向设置(横向vs横向). portrait).

下面的响应式CSS示例显示了根据页面宽度初始化某个CSS文件的过程. For example, 如果480px是当前设备屏幕的最大分辨率, 然后是main_1中定义的样式.css will be applied.

我们还可以在同一个CSS样式表中定义不同的样式，以便仅在满足某些约束时才使用它们. For example, 这部分响应式CSS只会在当前设备宽度大于480px的情况下使用:

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

“Smart Zoom”

移动浏览器使用所谓的“智能缩放”为用户提供“卓越”的阅读体验. 基本上，智能缩放是用来按比例减小页面大小的. 这可以通过两种方式表现出来:(1)用户发起的缩放(例如, 在iPhone屏幕上轻敲两次就可以放大当前网站), (2)加载时首先显示网页的放大版本.

考虑到我们可以使用响应式媒体查询来解决智能变焦可能针对的任何问题, 通常需要(甚至是必要的)禁用缩放，以确保页面内容始终填充浏览器:

By setting initial-scale 对于1，我们控制初始页面缩放级别(即页面加载时的缩放量). 如果你设计的网页是响应式的, then your fluid, 动态布局应该以一种智能的方式填充智能手机屏幕，而不需要任何初始缩放.

此外，我们可以完全禁用缩放 user-scalable=false.

Page Widths

假设您希望提供三种不同的响应式页面布局:一种用于桌面, 平板电脑(或笔记本电脑), 还有一个是智能手机. 您应该将哪个页面尺寸作为您的截止点(e.g., 480px)?

Unfortunately, 对于页面宽度目标没有定义的标准, 但是下面的例子是经常使用的响应值:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

但是，存在许多不同的宽度定义. For example, 320 and Up 有五个默认的CSS3媒体查询增量:480,600,768,992和1382px. 与本响应式web开发教程中给出的示例一起, 我可以列举至少十种其他方法.

使用这些合理的增量集，您可以瞄准大多数设备. In practice, 通常不需要单独处理前面提到的所有关于页面宽度的媒体查询示例——七种不同的分辨率可能有些多余. In my experience, 320px, 768px, and 1200px are the most commonly used; these three values should be sufficient for targeting smart phones, tablets/laptops, and desktops, respectively.

Pseudo-Elements

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

对于初学者，隐藏一些元素(display: none;)对于减少智能手机布局的屏幕元素数量来说是一个很好的解决方案, 几乎总是没有足够的空间.

但除此之外，您还可以使用CSS发挥创意 pseudo-elements (selectors), e.g., :before and :after. 注意:同样，伪元素由 all major browsers.

伪元素用于将特定样式应用于HTML元素的特定部分, 或者选择元素的某个子集. For example, the :first-line 伪元素允许您仅在某个选择器的第一行定义样式.g., p:first-line 将适用于所有的第一行 ps). Similarly, the a:visited 伪元素可以让你在所有元素上定义样式 aS中包含用户以前访问过的链接. 显然，这些都可以派上用场.

下面是一个简单的响应式设计示例，我们为登录按钮创建了三种不同的布局, 台式一台, tablet, and smartphone. On the smartphone, 我们会有一个单独的图标, 而平板电脑将有相同的图标，并附有“用户名”。. 最后，对于桌面，我们还将添加一条简短的指导性消息(“插入您的用户名”).

.username:after {
    内容:“插入您的用户名”;
}
@media screen and (max-width: 1024px) {
    .username:before {
        content:"User name";
    }
}
@media screen and (max-width: 480px) {
    .username:before {
        content:"";
    }
}

Using just the :before and :after 伪元素，我们实现如下:

要了解更多关于伪元素的魔力，Chris Coyier有一个很好的 write-up on CSS-Tricks.

那么，我该从哪里开始呢?

在本教程中，我们已经建立了一些响应式网页设计的构建模块.e.(媒体查询和伪元素)，并列出了每种元素的一些示例. 我们从这里往哪里走?

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

看看上面展示的布局的桌面版本. 在这种情况下，左边的内容(绿色矩形)可以作为某种形式的主菜单. 但是当使用分辨率较低的设备时(例如.g.(平板电脑或智能手机)，主菜单以全宽显示可能是有意义的. 对于媒体查询，你可以这样实现这个行为:

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

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

不幸的是，随着前端复杂性的增加，这种基本方法往往是不够的. 因为一个站点的内容组织在针对不同设备的版本之间通常有很大的不同, 用户体验最终不仅取决于桌面和移动端响应式CSS的使用, 还有HTML和JavaScript.

在确定不同设备的响应式布局时，有几个关键元素很重要. 不像桌面版本，我们有足够的空间来存放内容, 智能手机的开发要求更高. More than ever, 有必要对具体内容进行分组，并按层次定义各个部分的重要性.

For a smartphone, 对特定内容进行分组并按层次定义各个部分的重要性比以往任何时候都更加重要.

内容的各种用途也很重要. For example, 当你的用户有鼠标时, 他们可以将光标置于某些元素之上以获取更多信息, 所以你(作为网页开发人员)可以用这种方式留下一些待收集的信息——但当你的用户使用智能手机时，情况就不一样了.

In addition, 如果你在网站上留下了按钮，那么在智能手机上呈现出来的按钮就会比一般的手指还小, 你会给网站的使用和感觉带来不确定性. 注意上面的图片, 标准的网页视图(在左边)使得一些元素在较小的设备上完全无法使用.

这种行为还会增加用户出错的几率, 减缓他们的体验. In practice, 这可以表现为页面浏览量的减少, fewer sales, 整体参与度更低.

其他响应式设计元素

使用媒体查询时, 应该记住所有页面元素的行为, 不仅仅是那些被盯上的人, 特别是在使用流体网格时, 在这种情况下(与固定尺寸相反)，页面将在任何给定时刻被完全填充, 按比例增加和减少含量大小. 由于宽度是以百分比设置的，因此图形元素(例如.e.在这种流畅的布局下，图像可能会失真和混乱. 对于图像，一种解决方案如下:

img {
    max-width: 100%
}

其他因素也应以类似的方式处理. 例如，对于RWD中的图标，一个很好的解决方案是使用 IconFonts.

浅谈流体网格系统

当我们讨论完整的设计适应过程时, 我们经常着眼于最佳观看体验(从用户的角度). 这样的讨论应该包括最大限度地促进使用, 元素重要性(基于可见页面区域), facilitated reading, 直观的导航. 在这些类别中，最重要的组成部分之一是 内容宽度调整. 例如，所谓的流体网格系统有固定的元素:i.e.，基于相对宽度的元素占整个页面的百分比. 这样，所有元素在 responsive web design 系统随页面大小自动调整.

尽管这些流体网格系统与我们在这里讨论的密切相关, 它们实际上是一个完全独立的实体，需要额外的教程来详细讨论. 因此，我将只提到一些支持这种行为的主要框架: Bootstrap, Unsemantic, and Brackets.

Conclusion

Until recently, 网站优化是一个专门为基于不同web浏览器的功能定制而保留的术语. 除了我们今天面临的与不同浏览器标准的不可避免的斗争, 这个术语现在假设适应设备和屏幕尺寸的响应式网页设计. 要想在现代网络上脱颖而出，你的网站不仅要知道 who’s viewing it, but how.