要想實現css屏幕大小自適應，首先得引入 CSS3 @media 媒體查詢器：
media的使用和規則：
①被鏈接文檔將顯示在什么設備上。
②用於為不同的媒介類型規定不同的樣式。
語法： 1 @media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules}
實例：
1 /* 這是匹配橫屏的狀態，橫屏時的css代碼 */ 2 3 @media all and (orientation :landscape){} 4 5 /* 這是匹配豎屏的狀態，豎屏時的css代碼 */ 6 7 @media all and (orientation :portrait){} 8 9 @media X and (min-width:200px){} 10 /*X為媒體類型--->比如print/screen/TV等等*/ 11 12 /* 寬度大於600px小於960之間時，隱藏footer結構 */ 13 14 @media all and (min-height:640px) and (max-height:960px){ 15 footer{display:none;} 16 }
在實際應用的時候，首先得在HTML的頭文件<head>里上加入以下代碼：
1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
解釋：
width = device-width：寬度等於當前設備的寬度
initial-scale：初始的縮放比例（默認設置為1.0）
minimum-scale：允許用戶縮放到的最小比例（默認設置為1.0）
maximum-scale：允許用戶縮放到的最大比例（默認設置為1.0）
user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面）
因為media的類型很多，這里就發菜鳥教程的對應鏈接了：http://www.runoob.com/cssref/css3-pr-mediaquery.html
下面是media類型的screen（用於電腦屏幕，平板電腦，智能手機等）：
css自適應屏幕大小大方法：
1 @media screen and (min-width: 320px) and (max-width: 1156px){ 2 3 .site-bg-dl { 4 position: fixed; 5 height: 100%; 6 width: 100%; 7 z-index: 0; 8 background-image: url(bjxzfwzx/images/bj1.png); 9 background-size: cover; 10 background-repeat: no-repeat; 11 background-attachment: fixed; 12 background-size:100% 100%; 13 -moz-background-size:100% 100%; 14 } 15 }
解釋：
告訴瀏覽器當屏幕大於320px，並小於1156px下執行此代碼；
在css中添加如下內容 可以分別定制不同屏幕的顯示樣式：
1 /* 大屏幕 ：大於等於1200px*/ 2 @media (min-width: 1200px) { ... } 3 4 /*默認*/ 5 @media (min-width: 980px){...} 6 7 /* 平板電腦和小屏電腦之間的分辨率 */ 8 @media (min-width: 768px) and (max-width: 979px) { ... } 9 10 /* 橫向放置的手機和豎向放置的平板之間的分辨率 */ 11 @media (max-width: 767px) { ... } 12 13 /* 橫向放置的手機及分辨率更小的設備 */ 14 @media (max-width: 480px) { ... }