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