響應式布局是一個網站能夠兼容多個終端---而不是為每個終端做一個特定的版本
@media all(用於所有的設備) || screen (用於電腦屏幕,平板電腦,智能手機等) and|not|only(三個關鍵字可以選)
1 <head> 2 <style media="screen"> 3 @media screen and (max-width:600px){ 4 .con{ 5 background:red; 6 } 7 } 8 @media screen and (min-width:600px) and (max-width:800px){ 9 .con{ 10 background:blue; 11 } 12 } 13 @media screen and (min-width:800px){ 14 .con{ 15 background:green; 16 } 17 } 18 .con{ 19 width: 100%; 20 height: 100px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="con"> 26 一個網站能夠兼容多個終端---而不是為每個終端做一個特定的版本一個網站能夠兼容多個終端---而不是為每個終端做一個特定的版本一個網站能夠兼容多個終端---而不是為每個終端做一個特定的版本一個網站能夠兼容多個終端---而不是為每個終端做一個特定的版本一個網站能夠兼容多個終端---而不是為每個終端做一個特定的版本一個網站能夠兼容多個終端---而不是為每個終端做一個特定的版本 27 </div> 28 </body>
1.meta 標簽
最簡單的處理方式是加上一個 meta 標簽設置屏幕按1：1尺寸顯示，在 iPhone 和其他智能手機的瀏覽器提供網站全視圖瀏覽，並禁止用戶縮放頁面。
其中，width = device-width 這一句的意思是讓頁面的寬度等於屏幕的寬度。
1 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 2 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 3 <meta name="HandheldFriendly" content="true">
2.通過媒體查詢設置樣式media query
media query 是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如一個終端的分辨率小於980px，那么可以這樣寫:
1 @media screen and (max-width:980px){ 2 #head { …; } 3 #content { …; } 4 #footer { …; } 5 }
意思就是： 當屏幕的寬度大於等於 980 px 的時候 html 設置樣式。
rem 指的是 html 元素的 font-size，html 元素的 font-size 默認是 16px，所以 1 rem = 16px；然后根據 rem 來計算各個元素的寬高，然后配合 media query 就可以實現自適應。
3.設置多種視圖
假如我們要兼容ipad和iphone視圖，我們可以這樣設置：
1 /**ipad**/ 2 @media only screen and (min-width:768px)and(max-width:1024px){} 3 /**iphone**/ 4 @media only screen and (width:320px)and (width:768px){}
4.響應式設計需要注意的問題
4.1、寬度不固定，可以使用百分比
#head{width:100%;} #content{width:50%;}
4.2、在html頁面中的圖片，比如文章里插入的圖片我們都可以通過css樣式max-width來進行控制圖片的最大寬度，如：
img{ max-width:100%; height:auto; }