HTML in the Image Adaptive browser and screen, Width height adaptive

1, ( width adaptive ): In the head of the page code, add a row viewport meta tag.

<name= "Viewport"  content= "Width=device-width,initial-scale=1"  />

viewport is the default width and height of the Web page, which means that the width of the page is equal to the screen width by default (width= device-width), the original scale (initial-scale=1) is 1.0, that is, the initial size of the Web page occupies 100% of the screen area.

2, ( font Adaptive ): The font also cannot use absolute size (px), but only the relative size (EM).

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

3, ( Flow layout ): The position of each block is floating, not fixed.

{float: right; width: 70%; }{float: left;  Width: 25%;}

The advantage of float is that if the width is too small to fit two elements, the following elements will automatically scroll to the bottom of the preceding element without overflow (overflow) horizontally, avoiding the appearance of the horizontal scroll bar.

4, ( Adaptive Web Design ): The core is CSS3 introduced Mediaquery module.

It means that the screen width is automatically detected and then the corresponding CSS file is loaded.

<link rel= "stylesheet" type= "Text/css"Media = "screen and (max-device-width:400px)"href= "tinyscreen.css" />

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

<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 400 pixels to 600 pixels, the Smallscreen.css file is loaded.

5. (@media rules): The same CSS file, you can also choose to apply different CSS rules depending on the screen resolution.

{}

6, ( picture adaptive ): Insert the image in the HTML, if you want to make the picture adaptive screen small instead of width and height fixed can be added in the CSS code

img {height: auto; width: auto\9; width:100%;}

HTML in the Image Adaptive browser and screen, Width height adaptive