What is a responsive web design? How to proceed? _css

Start the first article. The old rules, the first boring talk about the weather category. 11 long vacation, the weather finally began some autumn flavor, sitting in the room even feel the need for hot coffee. Said two years ago is also in the National Day holiday began to do Joomla document translation; Good time for a long holiday, always can spare a day or two, quiet nest in the home Do blog, learn to do something new, simply no more comfortable things.

Say the right thing. Be prepared to focus on a few recent studies on the topic of "responsive web design", including concepts, practices, cases, and discussion of viewpoints. These articles are much longer (and even paginated) than previous translations of documents. ...), today's put on almost spent two days of "leisure time", the endurance is a test, efforts to improve it. Nonsense is over, here we go.

For now, almost every new customer wants their site to have a dedicated mobile device version. The perfect situation is for the iphone, the IPad, the BlackBerry, the Kindle ... Create one--page resolution must also be compatible with any device. Who knows how many new devices we need to design for the next 5 years to develop different versions of the page. When does this madness count.

In the field of web design and development, soon we will not be able to keep up with the pace of innovation in equipment and resolution. For most sites, it is impractical to create a separate version of each new device and resolution, and the result is that we will win the user base with some devices and lose those who use other devices. However, there may be another way to help us avoid this happening.

The idea of responsive web design is that page design and development should respond and adjust according to user behavior and device environment (System platform, screen size, screen orientation, etc.). Responsive Concrete practices are made up of many aspects, including flexible grids and layouts, pictures, and the use of CSS media query. Whether the user is using a notebook or an ipad, our pages should be able to automatically switch resolutions, picture sizes and related scripting features to suit different devices; in other words, the page should have the ability to automatically respond to the user's device environment. In this way, we don't have to do a special version design and development for the coming new devices. The concept of responsive web design

Ethan Marcotte once published an article "Responsive Web Design" in a List apart, citing the concept of responsive architecture:

A newly emerging discipline-"responsive Architecture (responsive architecture)"-suggests that physical space should be able to respond to the situation of the person in which it exists. Combined with embedded robotics and the application of stretching materials, architects are trying to build a wall structure that bends, scales and expands according to the surrounding population, and can also use motion sensors to coordinate climate control systems to adjust indoor temperature and ambient light. There are already companies producing "smart glass": When the number of indoor people reaches a certain threshold, the glass can automatically become opaque and ensure privacy.

Extending this idea to the realm of web design, we get a whole new concept. Why do we have to build a design and development plan for each user group? Similar to responsive architecture, web design should also be automated to respond and adjust to different device environments.

Obviously, we cannot and need not use motion sensors or robotics, and responsive web design needs more abstract thinking. Fortunately, some of the relevant concepts have been practiced, such as liquid layout, media queries and scripting that help pages reformat. But responsive web design is not just about screen resolution adaptation and automatic scaling pictures, etc., it is more like a new thinking mode for design. Adjust resolution

Different devices have their own screen resolution, sharpness, and screen orientation, and new devices that are constantly being developed will also bring new screen size specifications. Some devices are based on the horizontal screen (portrait), some are vertical screens (landscape), and even squares; for the increasingly popular iphone, ipad and other smartphones, tablets, users can also rotate the device to arbitrarily switch the screen orientation. How do you make a design that satisfies all situations.

To be compatible with both horizontal and vertical screens (users may also be able to switch directions during page loading), we must consider the size of n screen sizes. It is true that we can divide these specifications into several broad categories and then make a scheme for each category to ensure that the programme is at least as flexible as possible in this group. But even so, the results will be extremely anxious, who knows what kind of equipment in 5 years after the share of the number. And a lot of users don't even maximize the browser's window; How much do we have to think about such variables?

Morten Hjerde and his colleagues made a statistical survey of more than 400 mobile devices in the 2005-2008 market (see report), and the following figure shows the approximate results:

More than 08 years later, more and more representative new equipment has come out and become popular. Obviously, we cannot go on with the idea of "multiple programmes", so what should we do? Part of the solution: all elasticity

A few years ago, elastic layout (flexible layout) is almost a luxury, so-called elasticity, but also reflected in the vertical layout and font size and so on; pictures can always easily destroy the structure of the page, and even the elastic elements of the structure, in extreme cases, will still destroy the layout. So, the so-called elastic layout is not so flexible, it sometimes even can not adapt to desktop and notebook screen resolution differences, let alone mobile phones and other mobile devices.

Now we can make the page more "resilient" by responding to design and development ideas. The size of the picture can be automatically adjusted and the page layout will not be broken. Although there is never a perfect solution, it gives us more choices. The page will be truly resilient, regardless of how the user switches the device's on-screen orientation or from the desktop screen to the ipad.

In the article of Ethan Marcotte, which is mentioned earlier, he shows an example of the characteristics of responsive web design in terms of page elasticity:

The implementation of this example is a perfect combination of liquid mesh and liquid image technology, and is smart enough to use the right HTML tags in the right place. "Liquid Grid" is a very common practice; for "liquid picture" technology, the following article makes a good introduction: hiding and revealing portions of Images creating sliding composite Images Ground Images that Scale with the Layout

When it comes to creating a liquid page, it's a good idea to look at the flexible Web design:creating liquid and elastic Layouts with CSS from Zoe Mickley gillenwater, or download a sample Zhangxian: "How to create Elastic picture. " In addition, Zoe's this "essential resources for creating liquid and elastic Layouts." Provides a number of tutorials, resources, creative guidance, and best practices for creating resilient grids and layouts.

Technically speaking, while this sounds simple and feasible, it is more complicated than "combining these features". For example, take a closer look at the logo images in the example provided by Ethan Marcotte:

If we keep our browser window small, we will find that the text part of the logo image will always be reduced to the same year, to ensure its full readable, and not as the surrounding illustrations are both cut off. So the whole logo actually consists of two parts: the illustration as the background picture of the title of the page, will keep the size, but will be trimmed with the layout adjustment; The text part is a separate picture.  1 2 3 < h1 id = "logo" > < a href = "#" >< img src = "site/logo.png" alt = "The Baker Street Inquirer" /></a >

Where the,

This example shows a little bit about the idea of a responsive web design. However, this small effort is not enough to avoid the entire layout in the small size of the window to become too narrow or too short, and the logo text will eventually become too small to identify, the background picture will be too much cutting. Elastic picture

In response web design, an important factor is how to deal with picture problems. There are many scaling pictures of the technology, many of which are simple and easy. Among them, the first attempt by Richard Rutter is more popular, that is, the use of CSS max-width properties. This method is also mentioned in the paper of Ethan Marcotte's liquid picture. 1 img {max-width:100%;}

As long as there is no other style code covering the width of the picture that overrides the line, all the pictures on the page are loaded with their original width, unless the visible portion of the container is less than the original width of the picture. The above code ensures that the maximum width of the picture does not exceed the width of the browser window or the visible portion of its container, so when the visual portion of the window or container begins to narrow, the maximum width of the picture is reduced correspondingly, and the picture itself is never hidden and overwritten by the container edge. In fact, as Jason Grigsby in his CSS Media Query for the Mobile is fool ' s gold, "the idea behind the liquid picture is to ensure that, at all times, the picture is fully displayed in its original width, up to the maximum width." We don't have to set the width and height of the picture in the stylesheet, just let the style sheet scale the picture when the window size changes. "A method of simplicity and beauty."

The resolution and loading time of the picture itself is another issue to consider. Although through the above method, can be very easy to scale the picture, to ensure that the mobile device window can be full browsing, but if the original picture itself is too large, it will significantly reduce the download speed of picture files, storage space will also cause unnecessary consumption. Response picture

The "response picture" technique, proposed by filament group, helps solve the problem mentioned above: not only scaling the picture on a year-on-year scale, but also reducing the resolution of the picture itself on a small device. You can look at the demo page first.

The implementation of this technique requires the use of several related files, which we can obtain on the GitHub. Includes a JavaScript file (Rwd-images.js), a. htaccess file, and some sample resource files. You can refer to the documentation for responsive images using the specific method. The general principle is that Rwd-images.js detects the screen resolution of the current device and, if it is a large-screen device, adds a base tag to the head of the page and directs subsequent pictures, scripts, and style sheet load requests to a virtual path "/rwd-router". When these requests arrive on the server side, the. htacces file determines whether the request requires an original picture or a small "responsive picture" with the corresponding feedback output. For small-screen mobile devices, large pictures of the original size will never be used.

The technology supports most modern browsers, including ie8+, Safari, Chrome and opera, and mobile device versions of these browsers, and gracefully degrades in Firefox and some old browsers: we still get the output of small pictures, but at the same time, the original large image is also downloaded. Disable automatic scaling of pictures in iphone

In the iphone and ipod Touch, the page is automatically scaled to fit the size of the screen, the x axis does not produce a scroll bar, the user can drag and drop through all the pages, or enlarge the part of the page when needed. Here is a problem, even if we use the idea of responsive web design, specifically for the iphone's small screen output small picture, it will also be the same as the entire page with the same scale, as shown on the left of the following figure.

We can use some of Apple's proprietary meta tags to solve similar problems. Add the following code to the

By setting the value of Initial-scale to "1", you can override the default scaling method to maintain the original size and proportions. For more information on the use of the viewport meta tag, refer to Apple's official documentation. Create a layout structure

When the page needs to adapt to the different screen size difference is too large, in addition to the picture, we should also take into account the entire layout structure of the response adjustment; we can use a standalone stylesheet, or more effectively, using CSS media query. This will not cause much trouble, most style settings will not be affected and changed, only some specific elements will be floating, width and height settings to change the position.

We can use a default main style sheet to define the main structural elements of the page, such as #wrapper, #content, #sidebar, #nav等的默认布局方式, and some global color and font schemes.

We can monitor the changes in the layout of the page with different browsing environments, if they are too narrow or too wide, then inherit the main style sheet from a child style sheet, and write a style override specifically for some layout structures. Let's take a look at the code example:

The following code can be placed in the default main style sheet style.css:? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 A/* Default styles that would carry to the "child style sheet * * html,body{background ... ...} h 1, h 2, h 3 {} p, blockquote,  pre,  code, OL, ul{}/* Structural elements/#wrapper {width:  80% :  0  Auto; Background:  #fff; padding:  20px; #content {width:  54%; float:  left; margin-right:  3%;} #sidebar-left {width:  20%; Floa T:  left; Margin-right:  3%; #sidebar-right {width:  20%; float:  left;}

The following code can be placed in a child style sheet mobile.css, specifically for a mobile device, for style override:? 1 2 3 4 5 6 7 8 9 #wrapper {width:90%;} #content {width:100%;} #. #} # sidebar-left {width:100% clear:both; * Additional styling for our new layout/border-top:1px solid #ccc ; margin-top:20px;  } #sidebar-right {width:100%; clear:both/* Additional styling for our new layout * * border-top:1px #ccc; margin-top:20px; }

The approximate visual effects are shown in the following illustration:

Media Queries

CSS3 supports all media types supported by CSS2.1, such as screen, print, handheld, and so on, adding many feature properties that involve media types, including max-width (maximum width), device-width (device width), Orientation (screen orientation, horizontal screen or vertical screen) and color. New toys, such as the ipad or Android-related devices, that appear after the release of CSS3 can perfectly support these properties. So we can set a unique style for new devices through media query, ignoring old browsers on desktops that don't support CSS3.

In Ethan's article, we can see a section of media query usages:? 1 2 3 < link rel = "stylesheet" type = "text/css" media = "screen" and (max-device-width:480px) "href =" shetland.css "/>

The code itself is a good illustration of the working mechanism: if the page is rendered on screen (nonprinting) and the screen width is no more than 480px, the SHETLAND.CSS style sheet is loaded. To learn more about the new properties of CSS3 Media, refer to the article "the Orientation media Query."

We can create multiple style sheets to fit the width range of different device types. There are more examples and explanations in the "Meet The Media Query" section of Ethan's article. A more efficient approach is to integrate multiple media queries into a stylesheet file:? 1 2 3 4 5 6 7 8 9 Smartphones (portrait and Landscape)-----------*/@media only D (min-device-width:320px) and (max-device-width:480px) {/* Styles/}/* Smartphones (Landscape)-----------* * @media only the screen and (min-width:321px) {/* Styles/}/* Smartphones (Portrait)-----------*/@media only Scre En and (max-width:320px) {/* Styles */}

The code above comes from a free template created by Andy Clark that can be compatible with a variety of mainstream devices. This consolidates multiple media queries in