现在, 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.

一些网页设计师 spend days on end addressing small issues with Internet Explorer 和 leave their mobile users as second-h和 visitors. 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. 在某些情况下, this can mean the difference between success 和 failure—responsive design has implications for 转化率, 搜索引擎优化, 反弹率等等.

The 反应网络 设计 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. 例如: using the mouse does not provide the same user experience as, say, the touchscreen. 你不同意吗?? Your responsive mobile vs. desktop layouts should reflect these differences as defined within a site’s desktop, 平板电脑, or mobile media queries.

同时, 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. 而不是, the solution is to implement flexible responsive design elements that use the same HTML code to adjust to the user’s screen size.

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, case the most important things to note are minimum resolution (width) 和 取向 settings (l和scape vs. 肖像).

The responsive CSS example below s如何s the procedure for initiating a certain CSS file with respect to the page width. 例如, if 480px is the maximum resolution of the current device’s screen, then the styles defined in main_1.CSS将被应用.

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

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

“智能变焦”

Mobile 浏览器s use so-called “smart zoom” to provide users with a ‘superior’ reading experience. 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.

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 和 ensure that your page content always fills the 浏览器:

通过设置 初始 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, 然后是液体, dynamic layout should fill the smartphone screen in an intelligent way without requiring any initial zoom.

除了, 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. 在实践中, there is usually no need to separately h和le all of the aforementioned media query examples of page widths—seven different resolutions is probably overkill. 根据我的经验, 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, you also might want to s如何 or hide certain information programatically based on the size of the user’s device. Luckily, this too can be accomplished with pure CSS as outlined in the tutorial below.

For starters, hiding some elements (显示:没有;) can be a great solution when it comes to reducing the number of on-screen elements for a smartphone layout, 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.

Here’s a simple responsive design example in which we create three different layouts for a login button, 台式一台, 平板电脑, 和智能手机. 用智能手机, 我们会有一个单独的图标, while the 平板电脑 will have the same icon accompanied by “User name”. Finally, for the desktop, we’ll also add a short instructional message (“Insert your 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?

In this tutorial, we’ve established some of the building blocks for 响应式网页设计 (i.e., media queries 和 Pseudo-Elements) 和 laid out some examples of each. Where do we go from here?

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

Take a look at the desktop version of the layout presented above. In this case, the content on the left (the green rectangle) could serve as some sort of main menu. But when devices with lower resolution are in-use (e.g., a 平板电脑 or smartphone), it might make sense for this main menu to be displayed in full width. With media queries, you could implement this behavior as follows:

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

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

不幸的是, 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 和 mobile responsive CSS, but also HTML 和 JavaScript.

When determining responsive layouts for different devices, several key elements are important. Unlike desktop versions where we have enough space for the content, smartphone development is more dem和ing. 更甚于以往, it’s necessary to group specific contents 和 hierarchically define the importance of individual parts.

对于智能手机来说, it’s more important than ever to group specific contents 和 hierarchically define the importance of individual parts.

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

除了, if you leave buttons on your site that then render on 智能手机 as smaller than a typical finger, you’ll create uncertainty in the usage 和 feeling of your site. Notice that in the image above, the st和ard web view (on the left) renders some elements completely unusable when viewed on a smaller device.

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, in which case (as opposed to fixed dimensions) the page will be fully filled at any given moment, 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, they’re really a whole separate entity that would require an additional tutorial to discuss in detail. Therefore, I will just mention some major frameworks that support such behavior: 引导, Unsemantic, 括号.

结论

直到最近, website optimization was a term exclusively reserved for customization of functionality based on different web 浏览器s. Alongside the inevitable struggle with different 浏览器 st和ards that we face today, this term now assumes adapting to devices 和 screen sizes with 响应式网页设计 as well. To cut it on the modern web, your site must know not only 是谁 看，但是 如何.