The concept and method of Adaptive Web page design

Google conducted an online lecture on the concepts and methods of adaptive web design, maintaining the same Web page code to enable the site to have a better reading experience on a variety of browsing devices (from desktop monitors to smartphones or other mobile devices), briefly collating the contents of the lecture as follows:

1, add viewport label to the HTML head.

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

This code supports chrome, Firefox, IE9 browsers, but does not support IE8 and browsers below IE8.

2, at the end of the CSS file to increase the rules for different screen resolution.

For example, use the following code, you can make the screen width of less than 480 pixels of equipment (such as the iphone, etc.), the web side of the sidebar to hide the central content bar width automatically adjusted. The following code can only be modified for z-blog,wordpress related tag names.

3, the layout width use relative width.

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

4, the page uses the relative font

Do not use an absolute font (PX) on an HTML page, but use a relative font (EM), which for most browsers is usually converted with EM = PX/16, for example, 16px equals 1em.

According to a few of the things described above, I made some changes to my blog's CSS, I found that I can browse from the iphone to experience a better page, but there is a problem is not resolved, that is, the top navigation bar navbar display a problem, after the line is covered by the following article, Do not know how to better solve this problem (update: After the user prompts, in the navigation bar Divnavbar style, join the Overflow:hidden, a line can solve this problem).