How to write a mobile page

Uh, well, the novice just finished PC end will consider to do mobile phone end, a not to do the front end of the mobile phone is not a good front end, then today say how to front-end production of mobile Web page:

Certainly a lot of people (novice) in the thinking of how to use HTML to write the phone side, how to layout, and how to set the font units, there must be a lot of people online search, including LZ are online to find relevant information, but

Many of the information describing the mobile phone has been old (1314 of many,,, crying).

First of all want to write mobile phone side certainly without <meta name= "viewport" content= "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1 , user-scalable=no "/> This sentence

What it means to check out, about the layout, there is said that the REM layout, have said that the layout of the, then according to my own mobile phone experience, although 2 can be, but the width I like to use%,margin,padding some value when using EM,

About the font, it is sure to use the good of EM, you think the explanation of EM is what, is not based on the size of the window to adjust the font, then just right for us to use the phone-side font units. and write mobile phones with some semantic tags as well

List the

Head Header

Middle Main

Bottom footer, etc...

There is also the problem of writing mobile phone attention inheritance, it is best to take the class name alone, and other to the PC side no difference, of course, you want to do the response can use @media, give him the body of the minimum width (320px), others let him adapt to it.

The last paragraph of the code, for everyone reference

body{
min-width:320px;
}

header{
width:100%;
height:40px;
}

. nav_main{
width:100%;
Height:9em;
Overflow:hidden;
Margin:0.4em 0 0;
}

Add up (the div in percent, the height with the EM is good)

How to write a mobile page