Page adaptive problem

The concept and method of adaptive web design enables websites to have a better reading experience on a variety of browsing devices (from desktop computer monitors to smart phones or other mobile product devices, here is a brief summary.

1. Add the viewport tag to the HTML header.

Add the viewport meta tag at the beginning of the website HTML file to tell the browser that the browser's viewport width is equal to the device's 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, and ie9 browsers, but does not support IE8 or earlier browsers than IE8.

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

For example, you can use the following code to enable devices with a screen width less than 480 pixels (for example, iPhone), and automatically adjust the width of the central content bar on the webpage sidebar. Run the following code for Z-blog: you only need to modify the WordPress tag name.

@ Media screen and (max-device-width: 480px ){
# Divmain {
Float: none;
Width: auto;
}
# Divsidebar {
Display: none;
}
}

3. Use relative width for layout width.

The overall webpage frame can use absolute width, but it is best to use relative width for content frame and sidebar, so it is convenient to modify different resolutions. Of course, you do not need to use relative width, so you need to add the width of each Div to the small screen in @ media screen and (max-device-width: 480px), which is actually more troublesome.

4. Use relative fonts on the page (optional)

Do not use absolute fonts (PX) on HTML pages, but use relative fonts (EM). For most browsers, Em = px/16 is usually used, for example, 16px is equal to 1em.

5. Image adaptation (not necessary)

For the IMG label, you only need to Set max-width: 100%; or width: 100%; Statement: IMG {max-width: 98% ;}

How can I adjust the size of background-image loaded by CSS? In fact, it can be implemented in css3. Add the following statement: Background-size: 100% 100%;

Based on the content described above, I made some modifications to the CSS of my blog. I found that I could browse the pages with better experience from my iPhone, but there was a problem that was not solved, there is a problem with the navbar display in the top navigation bar. After the line breaks, it is covered by the following articles. I don't know how to better solve this problem (Updated: After a prompt from a netizen, in the style of the divnavbar in the navigation bar, add white-space: nowrap; overflow: hidden; to solve this problem ).

Page adaptive problem