css屏幕自适应
media的使用和規則：
①被鏈接文檔將顯示在什么設備上。
②用于為不同的媒介類型規定不同的樣式。
語法：
@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules}示例：
/* 這是匹配橫屏的狀態，橫屏時的css代碼 */@media all and (orientation :landscape){} /* 這是匹配豎屏的狀態，豎屏時的css代碼 */@media all and (orientation :portrait){}@media X and (min-width:200px){} /*X為媒體類型--->比如print/screen/TV等等*//* 寬度大于600px小于960之間時，隱藏footer結構 */@media all and (min-height:640px) and (max-height:960px){footer{display:none;}}在實際應用的時候，首先得在HTML的頭文件<head>里上加入以下代碼：
<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自適應屏幕大小大方法：
@media screen and (min-width: 320px) and (max-width: 1156px){.site-bg-dl {position: fixed;height: 100%;width: 100%;z-index: 0;background-image: url(bjxzfwzx/images/bj1.png);background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size:100% 100%;-moz-background-size:100% 100%;}}解釋：
告訴瀏覽器當屏幕大于320px，并小于1156px下執行此代碼；
在css中添加如下內容 可以分別定制不同屏幕的顯示樣式：
/* 大屏幕 ：大于等于1200px*/@media (min-width: 1200px) { ... }/*默認*/@media (min-width: 980px){...}/* 平板電腦和小屏電腦之間的分辨率 */@media (min-width: 768px) and (max-width: 979px) { ... }/* 橫向放置的手機和豎向放置的平板之間的分辨率 */@media (max-width: 767px) { ... }/* 橫向放置的手機及分辨率更小的設備 */@media (max-width: 480px) { ... }總結
- 上一篇： 项目实训（一）基于unity的2D多人乱
- 下一篇： 博客搬家QAQ