"Problem & Solve" mobile Web page HTML code implementation (to solve the problem of small display page) "Go"

A mobile-responsive web page effect

In fact, the main thing is to change the HTML page declaration:

Add the following code to the Web page to display it normally:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, User-scalable=no, minimum-scale=1.0, maximum-scale=1.0 "/>

Explain:

Width of the Width-viewport
The height of the Height-viewport
Initial-scale-Initial zoom ratio
Minimum-scale-Minimum scale to allow the user to zoom
Maximum-scale-Maximum scale to which the user is allowed to zoom
User-scalable-whether the user can manually scale

To simplify the point, you can change the above code to the following code, the effect is the same:

<meta content= "Width=device-width,user-scalable=no" name= "viewport" >

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

Finally, do not set too large specific width properties, such as you on the page to the body width of the property set to 1000px, this is certainly not possible, but can be set to 90% or auto, which is the screen adaptive.

-----------------------------------add: I am happy to split the line---------------------------------------------------

This setting is supported by all major browsers, including IE9. For those older browsers (mostly IE6, 7, 8), you need to use Css3-mediaqueries.js.

<!--[if Lt IE 9]> <script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script><! [endif]-->

Font of relative size

The font is also best not to use absolute size (px), but rather to use relative size (EM).

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

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

h1 {font-size:1.5em;}

Then, the size of the H1 is 1.5 times times the default size, which is 24 pixels (24/16=1.5).

small {  font-size:0.875em; }

The size of the small element is 0.875 times times the default size, which is 14 pixels (14/16=0.875).

Flow layout (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 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.

In addition, the use of absolute positioning (Position:absolute) should also be very careful.

Select Load CSS

The core of "adaptive web Design" is the media query module introduced by CSS3.

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.

In addition to loading CSS files with HTML tags, you can also load them in an existing CSS file.

@import url ("tinyscreen.css") screen and (max-device-width:400px);

@media rules for CSS

The same CSS file, you can also choose to apply different CSS rules depending on the screen resolution.

@media screen and (max-device-width:400px) {. column {float:none; width:auto;}　　#sidebar {display:none;} }

The above code means that if the screen width is less than 400 pixels, the column block is de-floating (float:none), Width auto-adjusting (Width:auto), and the sidebar block is not displayed (Display:none).

Adaptive image (fluid image)

In addition to layout and text, adaptive web design must also implement automatic scaling of pictures.

This is just one line of CSS code:

img {max-width:100%;}

This line of code is also valid for most video embedded pages, so it can be written as:

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

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

img {width:100%;}

Additionally, image distortion may occur when the Windows platform scales pictures. At this point, you can try to use IE's proprietary commands:

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

Or, Ethan Marcotte's imgsizer.js.

Addloadevent (function () {var IMGs = document.getElementById ("content"). getElementsByTagName ("img");　　Imgsizer.collate (IMGs); });

However, if there is a condition, it is best to load different resolution images depending on the screen of different sizes. There are many ways to do this, both server side and client can implement.

Supplemental Source: Adaptive Web Design (responsive web designs)

"Problem & Solve" mobile Web page HTML code implementation (to solve the problem of small display page) "Go"