自適應布局就是指能忘了使網頁自適應的顯示在不同大小終端設備上的新網頁設計方式及技術，它需要開發多套界面來適應不同的終端。
下面我是簡單以body作為類，進行樣式定義
index.css如下：
1 /* 頁面沒有超過640px引用這個樣式 */ 2 @media screen and (max-width: 600px){ 3 body{ 4 background-color: #13c2c3; 5 } 6 } 7 8 /*大於600px，小於900px之間的背景顏色*/ 9 @media (min-width: 600px) and (max-width: 900px) { 10 body{ 11 background-color: yellow; 12 } 13 } 14 15 16 /* 頁面超過640px引用這個樣式 */ 17 @media screen and (min-width: 900px){ 18 body{ 19 background-color: #0041ff; 20 } 21 }
在html中我是直接引入外部index.css的代碼
index.html如下：
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>
以上是頁面自適應的全部源代碼，如果大家還有什么不懂的可以直接把代碼復制到編輯器里預覽效果，畢竟效果決定一切！！！
如果您不想把兩個或多個頁面樣式放到一個css，也可以通過在外部引入css同時設置權限如
1 <!--media 指定當前屏幕，當最大寬度不超過640時引入這個css--> 2 <link href="css/1.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)"/> 3 <!--media 指定當前屏幕，當最小寬度超過640時引入這個css--> 4 <link href="css/2.css" type="text/css" rel="stylesheet" media="only screen and (min-width:640px)"/>
這個通過上面的index.css應該可以看出這個引入的方式的意思，意思是頁面小於640px引入1.css文件，頁面大於640px引入2.css文件。