首先我們在使用Media的時候需要先設置下麵這段代碼,來相容移動設備的展示效果: 準備工作1:設置Meta標簽 這段代碼的幾個參數解釋: width = device-width:寬度等於當前設備的寬度 initial-scale:初始的縮放比例(預設設置為1.0) minimum-scale:允許 ...
首先我們在使用Media的時候需要先設置下麵這段代碼,來相容移動設備的展示效果:
準備工作1:設置Meta標簽
<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,因為我們不希望用戶放大縮小頁面)
準備工作2:載入相容文件JS
因為IE8既不支持HTML5也不支持CSS3 Media,所以我們需要載入兩個JS文件,來保證我們的代碼實現相容效果:
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
準備工作3:設置IE渲染方式預設為最高(這部分可以選擇添加也可以不添加)
現在有很多人的IE瀏覽器都升級到IE9以上了,所以這個時候就有又很多詭異的事情發生了,例如現在是IE9的瀏覽器,但是瀏覽器的文檔模式卻是IE8:
為了防止這種情況,我們需要下麵這段代碼來讓IE的文檔模式永遠都是最新的:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
還有一個更好的寫法:
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
怎麼這段代碼後面加了一個chrome=1,這個Google Chrome Frame(谷歌內嵌瀏覽器框架GCF),如果有的用戶電腦裡面裝了這個chrome的插件,就可以讓電腦裡面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算,無比給力,不過如果用戶沒裝這個插件,那這段代碼就會讓IE以最高的文檔模式展現效果。這段代碼我還是建議你們用上,不過不用也是可以的。
進入CSS3 Media寫法:
我們先來瞅瞅下麵這段代碼,估計很多人在響應式的網站CSS很經常看到類似下麵的這段代碼
@media screen and (max-width: 960px){ body{ background: #ccc; } }
這個應該算是一個media的一個標準寫法,上面這段CSS代碼意思是:當頁面小於960px的時候執行它下麵的CSS.這個應該沒有太大疑問。
應該有人會發現上面這段代碼裡面有個screen,他的意思是在告知設備在列印頁面時使用襯線字體,在屏幕上顯示時用無襯線字體。但是目前我發現很多網站都會直接省略screen,因為你的網站可能不需要考慮用戶去列印時,你可以直接這樣寫:
@media (max-width: 960px){ body{ background: #ccc; } }
然後就是當瀏覽器尺寸大於960px時候的代碼了:
@media screen and (min-width:960px){ body{ background:orange; } }
我們還可以混合使用上面的用法:
@media screen and (min-width:960px) and (max-width:1200px){ body{ background:yellow; } }
上面的這段代碼的意思是當頁面寬度大於960px小於1200px的時候執行下麵的CSS。
Media所有參數彙總
以上就是我們最常需要用到的媒體查詢器的三個特性,大於,等於,小於的寫法。媒體查詢器的全部功能肯定不止這三個功能,下麵是我總結的它的一些參數用法解釋:
-
width:瀏覽器可視寬度。
-
height:瀏覽器可視高度。
-
device-width:設備屏幕的寬度。
-
device-height:設備屏幕的高度。
-
orientation:檢測設備目前處於橫向還是縱向狀態。
-
aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(例如:aspect-ratio:16/9)
-
device-aspect-ratio:檢測設備的寬度和高度的比例。
-
color:檢測顏色的位數。(例如:min-color:32就會檢測設備是否擁有32位顏色)
-
color-index:檢查設備顏色索引表中的顏色,他的值不能是負數。
-
monochrome:檢測單色楨緩衝區域中的每個像素的位數。(這個太高級,估計咱很少會用的到)
-
resolution:檢測屏幕或印表機的解析度。(例如:min-resolution:300dpi或min-resolution:118dpcm)。
-
grid:檢測輸出的設備是網格的還是點陣圖設備。
轉自:520UED