现在, your website will be visited by a wide variety of devices: desktops with large monitors, 中型笔记本电脑, 平板电脑, 智能手机等等.

To achieve an optimal user experience as a 前端工程师, your site should adjust its layout in response to these varied devices (i.e., to their varied screen resolutions 和 dimensions controlled by media queries in CSS. 的过程 回应 to the form of the user’s device is referred to as (you guessed it) 响应式网页设计 (RWD).

为什么 is it worth your time to study 响应式网页设计 media query examples 和 shift your focus to RWD? 一些网页设计师, 例如, instead make it their life’s work to ensure a stable user experience across all 浏览器s, often spending days on end addressing small issues with Internet Explorer.

This is a foolish approach.

一些网页设计师花了好几天的时间来解决ie浏览器的小问题，让他们的手机用户成为二手访问者. This is a foolish approach.

Mashable called 2013 the year of 响应式网页设计. 为什么? Over 30% of their traffic comes from mobile devices. They project that this number could reach 50% by the end of the year. Across the web in general, 17.4% of web traffic came from 智能手机 in 2013. 同时, Internet Explorer usage, 例如, accounts for just 12% of all 浏览器 traffic, down about 4% from this time last year (according to W3Schools). If you’re optimizing for a specific 浏览器, rather than the global smartphone population, you’re missing the forest for the trees. 在某些情况下, 这可能意味着成功和失败之间的差异——响应式设计的含义 转化率, 搜索引擎优化, 反弹率等等.

The Responsive Web 设计 Approach

What’s commonly glossed over about RWD is that it’s not just about adjusting the appearance of your webpages; instead, the focus should be on logically adapting your site for usage across different devices. 例如:使用鼠标不能提供与触摸屏相同的用户体验. 你不同意吗?? Your responsive mobile vs. desktop layouts should reflect these differences as defined within a site’s desktop, 平板电脑, or mobile media queries.

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

From a technical point of view, the solution lies in this responsive design tutorial: using CSS媒体查询, Pseudo-Elements, flexible set grid layouts, other tools to dynamically adjust to a given resolution.

Responsive 设计 Media Queries: Examples

Media types first appeared in HTML4 和 CSS2.1, which enabled the placement of separate CSS for screen 和 print. 以这种方式, it was possible to set separate styles for a page’s computer display vis-à-vis its printout.

or

@媒体屏幕{
    * {
        背景:银
    }
}

In CSS3, you can define styles depending on the page width. As page width correlates with the size of the user’s device, this capability thus allows you to define different layouts for different devices. Note: media queries are supported by 所有主流浏览器.

This definition is possible through the setting of basic properties: max-width, 设备宽度, 取向, color. Other definitions are possible as well; but in this, 在这种情况下，最重要的是要注意最小分辨率(宽度)和方向设置(横向vs横向). 肖像).

下面的响应式CSS示例显示了根据页面宽度初始化某个CSS文件的过程. 例如, if 480px is the maximum resolution of the current device’s screen, then the styles defined in main_1.CSS将被应用.

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

@media screen 和 (min-width: 480px) {
    div {
        浮:左;
        背景:红色;
    }
    .......
}

“智能变焦”

移动浏览器使用所谓的“智能缩放”为用户提供“卓越”的阅读体验. Basically, smart zoom is used to proportionally reduce page size. This can manifest itself in two ways: (1) user-initiated zoom (例如, tapping twice on an iPhone screen to zoom in on the current website), (2) initially displaying a zoomed-in version of a web page on load.

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

通过设置 初始 to 1, we control the initial page zoom level (that is, the amount of zoom upon page load). If you’ve designed your web page to be responsive, 然后是液体, 动态布局应该以一种智能的方式填充智能手机屏幕，而不需要任何初始缩放.

除了, we can disable zoom completely with user-scalable = false.

页面的宽度

Say you’re looking to provide three different responsive page layouts: one for desktops, one for 平板电脑 (or laptops), one for 智能手机. Which page dimensions should you target as your cutoffs (e.g., 480px)?

不幸的是, there’s no defined st和ard for the page widths to target, but the following example responsive values are often used:

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

However, a number of different width definitions exist. 例如, 320及以上 has five default CSS3 Media Query increments: 480, 600, 768, 992, 1382px. Along with the given example in this responsive web development tutorial, I could enumerate at least ten other approaches.

With any of these reasonable sets of increments, you can target most devices. 在实践中, 通常不需要单独处理前面提到的所有关于页面宽度的媒体查询示例——七种不同的分辨率可能有些多余. 根据我的经验, 320px, 768px, 1200px are the most commonly used; these three values should be sufficient for targeting smart phones, 平板电脑/笔记本电脑, 和台式电脑, 分别.

Pseudo-Elements

Building on top of your responsive media queries from the previous example, 您还可能希望根据用户设备的大小以编程方式显示或隐藏某些信息. Luckily, this too can be accomplished with pure CSS as outlined in the tutorial below.

For starters, hiding some elements (显示:没有;)对于减少智能手机布局的屏幕元素数量来说是一个很好的解决方案, where there’s almost always insufficient space.

But beyond that, you can also get creative with CSS Pseudo-Elements (选择器),e.g., :在 和 :在. Note: once again, Pseudo-Elements are supported by 所有主流浏览器.

Pseudo-elements are used to apply specific styles to specific portions of an HTML element, or to select a certain subset of elements. 例如， :一线 pseudo-element lets you define styles solely on the first line a certain selector (e.g., p:一线 will apply to the first line of all ps). 类似地, 答:访问 pseudo-element will let you define styles on all as with links previously visited by the user. Clearly, these can come in h和y.

下面是一个简单的响应式设计示例，我们为登录按钮创建了三种不同的布局, 台式一台, 平板电脑, 和智能手机. 用智能手机, 我们会有一个单独的图标, while the 平板电脑 will have the same icon accompanied by “User name”. 最后，对于桌面，我们还将添加一条简短的指导性消息(“插入您的用户名”).

.用户名:{后
    content:"Insert your user name";
}
@media screen 和 (max-width: 1024px) {
    .用户名:{之前
        内容:“用户名”;
    }
}
@media screen 和 (max-width: 480px) {
    .用户名:{之前
        内容:“”;
    }
}

只使用 :在 和 :在 Pseudo-Elements, we achieve the following:

For more on the magic of psuedo-elements, Chris Coyier has a good 帐面价值 在css技巧.

So, Where Should I Start?

在本教程中，我们已经建立了一些响应式网页设计的构建模块.e., media queries 和 Pseudo-Elements) 和 laid out some examples of each. Where do we go from here?

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

Take a look at the desktop version of the layout presented above. 在这种情况下，左边的内容(绿色矩形)可以作为某种形式的主菜单. But when devices with lower resolution are in-use (e.g.(平板电脑或智能手机)，主菜单以全宽显示可能是有意义的. With media queries, you could implement this behavior as follows:

@media screen 和 (max-width: 1200px) {
    .菜单{ 
        宽度:100%;
    }
}

@media screen 和 (min-width: 1200px) {
    .菜单{
        宽度:30%;
    }
}

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

在确定不同设备的响应式布局时，有几个关键元素很重要. Unlike desktop versions where we have enough space for the content, smartphone development is more dem和ing. 更甚于以往, 有必要对具体内容进行分组，并按层次定义各个部分的重要性.

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

The various uses of your content are also important. 例如, when your user has a mouse, they can set the cursor above certain elements to get more information, 所以你(作为网页开发人员)可以用这种方式留下一些待收集的信息——但当你的用户使用智能手机时，情况就不一样了.

除了, 如果你在网站上留下了按钮，那么在智能手机上呈现出来的按钮就会比一般的手指还小, you’ll create uncertainty in the usage 和 feeling of your site. Notice that in the image above, 标准的网页视图(在左边)使得一些元素在较小的设备上完全无法使用.

Such behavior will also increase the chances that your user makes an error, slowing down their experience. 在实践中, this can manifest itself as decreased page views, 更少的销售, less overall engagement.

Other Responsive 设计 Elements

When using media queries, one should keep in mind the behavior of all page elements, not just those that are being targeted, especially when using fluid grids, 在这种情况下(与固定尺寸相反)，页面将在任何给定时刻被完全填充, increasing 和 decreasing content size proportionally. Since widths are set in percentages, graphical elements (i.e., images) can get distorted 和 mangled under such a fluid layout. For images, one solution is as follows:

img {
    max-width: 100%
}

Other elements should be dealt with in similar ways. 例如, a great solution for icons in RWD is to use IconFonts.

A Few Words on Fluid Grid Systems

When we discuss the process of full design adaptation, we often look at optimal viewing experience (from the user’s perspective). Such a discussion should include maximum facilitated usage, element importance (based on visible page regions), 方便阅读, intuitive navigation. Among these categories, one of the most important components is content width adjustment. 例如， so-called fluid grid systems have set elements, i.e., elements based on relative widths as percentages of the overall page. 以这种方式, all elements in the 响应式网页设计 system automatically adjust with the size of the page.

Although these fluid grid systems are closely related to what we’ve been discussing here, 它们实际上是一个完全独立的实体，需要额外的教程来详细讨论. Therefore, I will just mention some major frameworks that support such behavior: 引导, Unsemantic, 括号.

结论

直到最近, 网站优化是一个专门为基于不同web浏览器的功能定制而保留的术语. Alongside the inevitable struggle with different 浏览器 st和ards that we face today, 这个术语现在假设适应设备和屏幕尺寸的响应式网页设计. To cut it on the modern web, your site must know not only 是谁 看，但是 如何.