Adaptive Page design method, Adaptive Page Design

Adaptive Page design method, Adaptive Page Design

Ii. Allow Automatic Webpage Width Adjustment

How does "Adaptive Web Design" work? In fact, it is not difficult.

First, add a line of viewport meta tag to the header of the webpage code.

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

Viewport is the default width and height of the webpage. The code above indicates that the webpage width is equal to the screen width (width = device-width) by default, and the original scaling ratio (initial-scale = 1) is 1.0, that is, the initial page size accounts for 100% of the screen area.

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

<! -- [If lt IE 9]>
<Script src = "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </script>
<! [Endif] -->

3. Do not use absolute width

Because the web page will adjust the layout according to the screen width, you cannot use an absolute width layout or an element with an absolute width. This article is very important.

Specifically, the CSS Code cannot specify the pixel width:

Width: xxx px;

Only percent width can be specified:

Width: xx %;

Or

Width: auto;

4. Relative font size

The font cannot use absolute size (px), but only relative size (em ).

Body {
Font: normal 100% Helvetica, Arial, sans-serif;
}

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

H1 {
Font-size: 1.5em;
}

Then, h1 is 1.5 times the default size, that 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, that is, 14 pixels (14/16 = 0.875 ).

5. fluid grid)

The meaning of "flow layout" is that the positions of each block are floating, not fixed.

. Main {
Float: right;
Width: 70%;
}

. LeftBar {
Float: left;
Width: 25%;
}

The advantage of float is that if the width is too small and there are no more than two elements, the following elements will automatically scroll below the previous element and will not overflow in the horizontal direction ), the horizontal scroll bar is avoided.

In addition, be careful when using absolute position: absolute.

6. Select to load CSS

The core of "Adaptive Webpage Design" is the Media Query module introduced by CSS3.

It means to automatically detect the screen width and then load the corresponding CSS file.

<Link rel = "stylesheet" type = "text/css"
Media = "screen and (max-device-width: 400px )"
Href = "tinyScreen.css"/>

The code above indicates that if the screen width is less than 400 pixels (max-device-width: px133, The tinyscreen.css file is used.

<Link rel = "stylesheet" type = "text/css"
Media = "screen and (min-width: 400px) and (max-device-width: 600px )"
Href = "smallScreen.css"/>

If the screen width is between and, then the smallscreen.css file will be merged.

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 );

VII. CSS @ media rules

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

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

. Column {
Float: none;
Width: auto;
}

# Sidebar {
Display: none;
}

}

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

8. fluid image)

In addition to layout and text, "Adaptive Webpage Design" must also achieve automatic scaling of images.

Only one line of CSS code is required:

Img {max-width: 100% ;}

This line of code is also valid for most videos embedded in Web pages, so you can write it:

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

The old version of IE does not support max-width, so it has to be written:

Img {width: 100% ;}

In addition, image distortion may occur during image scaling on windows. In this case, you can try the private command of IE:

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

Or, imgSizer. js of Ethan Marcotte.

AddLoadEvent (function (){

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

ImgSizer. collate (imgs );

});