Reprinted from http://www.ruanyifeng.com

With the popularity of 3G, more and more people use mobile phones to access the Internet.

Mobile devices are surpassing desktop devices as the most common terminal for accessing the Internet. As a result, web designers have to face a difficult problem: how to render the same web page on devices of different sizes?

The screen of mobile phones is relatively small, and the width is usually less than 600 pixels; the screen width of PC is generally more than 1000 pixels (the current mainstream width is 1366×768), and some even reach 2000 pixels. It is not easy to present the same content with satisfactory results on screens of different sizes.

The solution for many websites is to provide different web pages for different devices, such as a dedicated mobile version, or iPhone/iPad version. Although this ensures the effect, it is more troublesome and requires maintaining several versions at the same time. Moreover, if a website has multiple portals, it will greatly increase the complexity of the architectural design.

Therefore, some people have long imagined whether it is possible to "design once and apply universally", so that the same web page can automatically adapt to screens of different sizes and automatically adjust the layout (layout) according to the screen width?

1. The concept of "Responsive Web Design"

In 2010, Ethan Marcotte proposed "Responsive Web Design" (Responsive Web Design) Design) is a term that refers to web design that can automatically recognize the screen width and make corresponding adjustments.

He made a sample with the heads of the six protagonists of "The Adventures of Sherlock Holmes". If the screen width is greater than 1300 pixels, 6 pictures are arranged side by side in a row.

If the screen width is between 600 pixels and 1300 pixels, the 6 pictures are divided into two rows.

If the screen width is between 400 pixels and 600 pixels, the navigation bar is moved to the head of the web page.

If the screen width is below 400 pixels, the 6 pictures are divided into three rows.

mediaqueri.es has more examples like this above.

There is also a test gadget here that can display the test results of screens with different resolutions on a web page at the same time. I recommend installing it.

2. Allow automatic adjustment of web page width

How does "adaptive web design" work? It's not that difficult.

First, add a line of viewport meta tags at the head of the web page code.

viewport is the default width and height of the web page, the above line The meaning of the code is that the width of the web page is equal to the screen width by default (width=device-width), and the original scaling ratio (initial-scale=1) is 1.0, that is, the initial size of the web page occupies 100% of the screen area.

All major browsers support this setting, including IE9. For those older browsers (mainly IE6, 7, 8), you need to use css3-mediaqueries.js.

3. Do not use absolute width

Because the web page will be based on The screen width adjusts the layout, so you cannot use absolute width layouts, nor can you use elements with absolute widths. This one is very important.

Specifically, CSS code cannot specify pixel width:

width:xxx px;

Only percentage width can be specified:

width: xx%;

or

Width:auto;

4. Relative sized fonts

The font cannot also use absolute size (px) , while only relative sizes (em) can be used.

　body {
　　font: normal 100% Helvetica, Arial, sans-serif;
　　}

The above code specifies that the font size is 100% of the default size of the page, that is 16 pixels.

h1 {
font-size: 1.5em;
}

Then, the size of h1 is 1.5 times the default size, which is 24 pixels (24/16=1.5) .

small {
font-size: 0.875em;
}

The size of the small element is 0.875 times the default size, which is 14 pixels (14/16=0.875).

5. Fluid grid (fluid grid)

The meaning of "fluid grid" is that the position of each block is floating and not fixed.

.main {
float: right;
width: 70%;
}

.leftBar {
float: left;
width: 25 %;
}

The advantage of float is that if the width is too small to fit two elements, the following element will automatically scroll to the bottom of the previous element and will not overflow (overflow) in the horizontal direction. Avoid horizontal scroll bars.

In addition, you must be very careful when using absolute positioning (position: absolute).

6. Choose to load CSS

The core of "adaptive web design" is the Media Query module introduced by CSS3.

What it means is to automatically detect the screen width and then load the corresponding CSS file.

　 　　 media="screen and (max-device-width: 400px)"
　　 href="tinyScreen.css" / >

The above code means that if the screen width is less than 400 pixels (max-device-width: 400px), load the tinyScreen.css file.

　 　　 media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />

If the screen width is between 400 pixels and 600 pixels, the smallScreen.css file is loaded.

In addition to loading CSS files with html tags, you can also load them in existing CSS files.

　@import url("tinyScreen.css") screen and (max-device-width: 400px);

7. CSS @media rules

In the same CSS file, you can also choose to apply different CSS rules according to different screen resolutions.

@media screen and (max-device-width: 400px) {

.column {
float: none;
width:auto;
}

　#sidebar {
　　　display:none;
　　　}

　　}

The above code means that if the screen width is less than 400 pixels, the column block is unfloated (float :none), the width is automatically adjusted (width:auto), and the sidebar block is not displayed (display:none).

8. Adaptive image (fluid image)

In addition to layout and text, "adaptive web design" must also implement automatic scaling of images.

This only requires one line of CSS code:

img { max-width: 100%;}

This line of code is also valid for most videos embedded in web pages, so it can be written as ：

img, object { max-width: 100%;}

The old version of IE does not support max-width, so I have to write:

img { width: 100 %; }

In addition, when scaling images on the Windows platform, image distortion may occur. At this time, you can try to use IE's proprietary command:

img { -ms-interpolation-mode: bicubic; }

Or, Ethan Marcotte's imgSizer.js.

addLoadEvent(function() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

　});

However, if possible, it is best to load images of different resolutions according to different screen sizes. There are many ways to do this, both on the server side and on the client side.