Self-adapting web-making for screen phones of different sizes

1. Add viewport tag to HTML header
At the beginning of the Web site HTML file, add the viewport meta tag to tell the browser viewport width equal to the device screen

width, without initial scaling. This line of code 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 Web page occupies 100% of the screen area. The code is as follows:

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

This code supports chrome, Firefox, IE9 or more browsers, but not IE8 and browsers below IE8.

2. @media screen and (max-width:480px) {html{font-size:20px}}

Determine the size of the font-size based on the different logical pixels of the phone.

3, do not use absolute width

Because the page adjusts the layout based on the width of the screen, you cannot use an absolute width layout or use a

The element to the width. This is a very important article. Specifically, the CSS code cannot specify the pixel width: width:xxx px; only percent width can be specified: width:xx% or width:auto, height, padding, margin cannot be expressed in PX, only in percent or REM.

4, the relative size of the font

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

5, the image of the adaptive:img {width:100%;}.

Self-adapting web-making for screen phones of different sizes