Page by page implementation of adaptive CSS

Refers to adaptive layout can forget that the new web page display adaptive design methods and technology at the terminal devices of different sizes, it is desirable to develop an interface to accommodate multiple sets of different terminals.

Now I was as simple to body class, a style definition

index.css as follows:

1  / * page does not exceed the reference pattern 640px * / 
2  @media Screen and (max-width: 600px) {
 . 3      body {
 . 4                background-Color : # 13c2c3 ;
 . 5               }
 . 6                  }
 . 7  
. 8  / * greater than 600px, 900px of less than between the background color * / 
. 9  @media (min-width: 600px) and (max-width: 900px) { 
 10      body {
 . 11                   background-color : Yellow ;
 12 is               }
 13 is  }
 14  
15  
16 / * Page styles exceeds the reference 640px * / 
. 17  @media Screen and (min-width: 900px) {
 18 is       body {
 . 19                    background-Color : # 0041ff ;
 20 is                }
 21 is                  }

I was directly in html code introduction of external index.css

index.html as follows:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 7     <link  href="css/1.css" type="text/css" rel="stylesheet"/>
 8     
 9     
10 </head>
11 <body>
12 
13 </body>
14 </html>

These are the pages adaptive full source code, if you do not know what else you can directly copy the code into the editor preview, after all, the effect is everything! ! !

If you do not want to put two or more pages into a style css, css also by introducing outside and set permissions such as

. 1   <-! Media specifies the current screen, the introduction css when a maximum width of 640 -> 
2      < Link   the href = "css / 1.CSS" type = "text / css" the rel = "this stylesheet" Media = " screen and only (max-width: 640px by) " /> 
. 3      <-! Media specified current screen, when the introduction of the minimum width exceeds css 640 -> 
. 4      < Link   the href =" css / 2.css " type =" text / CSS " the rel =" this stylesheet " Media =" only and Screen (min-width: 640px by) " />

By the above it should be seen index.css introduced this way means, meaning that less than 640px introduced 1.css page file, the page file is larger than 640px 2.css introduced.

Page by page implementation of adaptive CSS

Guess you like