First, add <meta name= "viewport" content= "width=device-width,initial-scale=1.0 in <meta charset= "UTF-8" > (Set page encoding)
<meta http-equiv= "Pragma" content= "No-cache"/>
(not allowed to read from the cache, cannot be accessed offline) two, the introduction of CSS method one: Depending on the screen width loading different css <link rel= "stylesheet" type= "Text/css"media= "screen and (max-device-width:640px)"href= "Small.css"/>This means: The screen width is maximum 640px, load small.css <link rel= "stylesheet" type= "Text/css" media= "screens and (min-width:640px) and (max- device-width:960px) "href=" Middle.css "/> means: screen width between 640~960px, load Middle.css method Two: Add @media in the same CSS to judge less in the notation: p{font-size:16px; @media screen and (max-device-width:640px) {font-size:14px; }} CSS in the wording: p{font-size:16px; } @media screen and (max-device-width:640px) {p{padding-top:45px; }} Note: 1, do not use absolute width: width:xxx px;, can use EM or% instead, the same font 2, the appropriate use of absolute layout absolute, but do not misuse 3, the proposed use of mobile layout float (more details, refer to Http://luso ngsong.com/info/post/158.html)
CSS Page Self-adapting
