The method of self-adapting web page design

Yesterday at noon Google conducted an online lecture on the concept and methods of adaptive web design, maintaining the same page code, so that the site in a variety of browsing equipment (from desktop computer monitors to smartphones or other mobile device) on a better reading experience, here I will briefly tidy up the lecture content.

1. Add viewport tags to the HTML header.

At the beginning of the Web site HTML file, add the viewport meta tag to tell the browser that the viewport width is equal to the device screen width without initial scaling. The code is as follows:

<meta name= "viewport" content= "width=device-width, initial-scale=1"/>

This code supports chrome, Firefox, IE9 or more browsers, but not IE8 and browsers below IE8.

2. Add rules for different screen resolutions at the end of the CSS file.

For example, use the following code, you can make the screen width of less than 480 pixels of devices (such as the iphone, etc.), the Web side bar hides the middle content bar width automatically adjust. The following code is for Z-blog,wordpress-related label names just modify it.

@media screen and (max-device-width:480px) {
#divMain {
Float:none;
Width:auto;
}
#divSidebar {
Display:none;
}
}

3, the layout width uses the relative width.

The overall frame of the Web page can use absolute width, but the lower content frame, sidebar, etc. are best used relative width, so it is convenient to modify for different resolutions. Of course, you can not use the relative width, it is necessary to @media screen and (max-device-width:480px) to increase the width of the individual div for small screens, actually more trouble.

4, the page use relative font (not necessary)

Do not use the absolute font (PX) on the HTML page, but to use relative font (EM), for most browsers, usually with the EM = PX/16 conversion, such as 16px is equal to 1em.

5. Image adaptation (not necessary)

IMG tag, only need to set max-width:100%; or width:100%; The statement is: img {max-width:98%;}

CSS loaded background-image How to adapt size, in fact, CSS3 can be implemented, add the following statement: background-size:100% 100%;

According to the above points, I have made some changes to my blog's css, found that I can browse from the iphone to experience better pages, but there is a problem is not resolved, is the top navigation bar navbar display problems, after the line is covered by the following article, Do not know how to better solve this problem (update: After netizens hint, in the navigation bar Divnavbar style, add white-space:nowrap;  Overflow:hidden; Solve the problem).

Is the use of the iphone access, after modifying the CSS for the Adaptive Web page after the Moonlight Blog home page, looks much better than the original non-optimized page.

In short, according to the above four steps to modify, it can be very simple to modify a site for a variety of devices to browse the page, which for the user through the mobile phone access to the site, it is indeed a good thing.

Finally, share the video address of Google's lecture on adaptive web design, click here to watch it online.

Methods for adaptive Web page design