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浏览器解决小问题.

这是一种愚蠢的做法.

Some web designers spend days on end addressing small issues with Internet Explorer and leave their mobile users as second-hand visitors. 这是一种愚蠢的做法.

Mashable称2013年为响应式网页设计年. Why? 超过30%的流量来自移动设备. 他们预计，到今年年底，这一数字可能达到50%. 在整个网络中， 17.2013年，4%的网络流量来自智能手机. 与此同时，以ie浏览器为例，其使用量仅占所有浏览器的12% browser 流量较去年同期下降了约4% W3Schools). 如果你正在针对特定的浏览器进行优化, 而不是全球智能手机用户, 你这是只见树木不见森林. And in some cases, this can mean the difference between success and failure—responsive design has implications for 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, 重点应该是在逻辑上调整您的站点以适应不同设备的使用. For example: using the mouse does not provide the same user experience as, say, the touchscreen. Don’t you agree? 你的响应式手机vs. 桌面布局应该反映网站桌面中定义的这些差异, tablet, 或者移动媒体查询.

At the same time, you don’t want to be completely rewriting your site for each of the tens of different screen sizes on which it might be viewed—such an approach is simply infeasible. Instead, the solution is to implement flexible responsive design elements that use the same HTML code to adjust to the user’s screen size.

从技术角度来看，解决方案在于这个响应式设计教程:使用 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, case the most important things to note are minimum resolution (width) and orientation settings (landscape vs. portrait).

The responsive CSS example below shows the procedure for initiating a certain CSS file with respect to the page width. For example, 如果480px是当前设备屏幕的最大分辨率, 然后是main_1中定义的样式.css will be applied.

We can also define different styles within the same CSS stylesheet such that they are only utilized if certain constraints are satisfied. For example, this portion of our responsive CSS would only be used if the current device had a width above 480px:

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

“Smart Zoom”

Mobile browsers use so-called “smart zoom” to provide users with a ‘superior’ reading experience. 基本上，智能缩放是用来按比例减小页面大小的. 这可以通过两种方式表现出来:(1)用户发起的缩放(例如, 在iPhone屏幕上轻敲两次就可以放大当前网站), (2)加载时首先显示网页的放大版本.

Given that we can just use responsive media queries to solve any of the problems at which smart zoom might be targeted, it’s often desirable (or even necessary) to disable zoom and ensure that your page content always fills the browser:

By setting initial-scale 对于1，我们控制初始页面缩放级别(即页面加载时的缩放量). 如果你设计的网页是响应式的, then your fluid, dynamic layout should fill the smartphone screen in an intelligent way without requiring any initial zoom.

此外，我们可以完全禁用缩放 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, there is usually no need to separately handle all of the aforementioned media query examples of page widths—seven different resolutions is probably overkill. 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

构建在前面示例的响应式媒体查询的基础上, you also might want to show or hide certain information programatically based on the size of the user’s device. 幸运的是，这也可以用纯CSS完成，如下面的教程所述.

对于初学者，隐藏一些元素(display: none;) can be a great solution when it comes to reducing the number of on-screen elements for a smartphone layout, 几乎总是没有足够的空间.

但除此之外，您还可以使用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中包含用户以前访问过的链接. 显然，这些都可以派上用场.

Here’s a simple responsive design example in which we create three different layouts for a login button, 台式一台, tablet, and smartphone. On the smartphone, 我们会有一个单独的图标, 而平板电脑将有相同的图标，并附有“用户名”。. Finally, for the desktop, we’ll also add a short instructional message (“Insert your user name”).

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

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

In this tutorial, we’ve established some of the building blocks for responsive web design (i.e.(媒体查询和伪元素)，并列出了每种元素的一些示例. 我们从这里往哪里走?

The first step you should take is to organize all of your webpage’s elements into various screen sizes.

看看上面展示的布局的桌面版本. In this case, the content on the left (the green rectangle) could serve as some sort of main menu. 但是当使用分辨率较低的设备时(例如.g., a tablet or smartphone), it might make sense for this main menu to be displayed in full width. 对于媒体查询，你可以这样实现这个行为:

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

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

Unfortunately, this basic approach is often insufficient as your front end grows in complication. As a site’s content organization often differs significantly between versions aimed at different devices, the user experience eventually depends on the use of not only desktop and mobile responsive CSS, 还有HTML和JavaScript.

When determining responsive layouts for different devices, several key elements are important. 不像桌面版本，我们有足够的空间来存放内容, 智能手机的开发要求更高. More than ever, it’s necessary to group specific contents and hierarchically define the importance of individual parts.

For a smartphone, it’s more important than ever to group specific contents and hierarchically define the importance of individual parts.

内容的各种用途也很重要. For example, 当你的用户有鼠标时, 他们可以将光标置于某些元素之上以获取更多信息, so you (as the web developer) can leave some information to-be gathered in this way—but this won’t be the case when your user is on a smartphone.

In addition, if you leave buttons on your site that then render on smartphones as smaller than a typical finger, 你会给网站的使用和感觉带来不确定性. 注意上面的图片, the standard web view (on the left) renders some elements completely unusable when viewed on a smaller device.

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

其他响应式设计元素

使用媒体查询时, 应该记住所有页面元素的行为, 不仅仅是那些被盯上的人, 特别是在使用流体网格时, in which case (as opposed to fixed dimensions) the page will be fully filled at any given moment, 按比例增加和减少含量大小. 由于宽度是以百分比设置的，因此图形元素(例如.e.在这种流畅的布局下，图像可能会失真和混乱. 对于图像，一种解决方案如下:

img {
    max-width: 100%
}

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

浅谈流体网格系统

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

尽管这些流体网格系统与我们在这里讨论的密切相关, they’re really a whole separate entity that would require an additional tutorial to discuss in detail. 因此，我将只提到一些支持这种行为的主要框架: Bootstrap, Unsemantic, and Brackets.

Conclusion

Until recently, website optimization was a term exclusively reserved for customization of functionality based on different web browsers. 除了我们今天面临的与不同浏览器标准的不可避免的斗争, this term now assumes adapting to devices and screen sizes with responsive web design as well. 要想在现代网络上脱颖而出，你的网站不仅要知道 who’s viewing it, but how.