CSS3 @media 用法總結

weixin_33762321發表於2016-11-03
CSSS3
//語法：
@media mediatype and | not | only (media feature) { css-code; }
//也可以針對不同的媒體使用不同的stylesheets: 
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

一、首先是<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，因為我們不希望使用者放大縮小頁面）

二、<head>標籤中引入（CSS2 media）

其實並不是只有CSS3才支援Media的用法，早在CSS2開始就已經支援Media，具體用法，就是在HTML頁面的head標籤中插入如下程式碼：

例如我們想知道現在的移動裝置是不是縱向放置的螢幕，可以這樣寫：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" ;href="style.css">

頁面寬度小於960的執行指定的樣式檔案：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

既然CSS2可以實現CSS的這個效果為什麼不用這個方法呢，很多人應該會問，但是上面這個方法，最大的弊端是他會增加頁面http的請求次數，增加了頁面負擔，我們用CSS3把樣式都寫在一個檔案裡面才是最佳的方法。

下面來解釋一下遇到衝突時的機制：

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 800px)">  
<link rel="stylesheet" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">  
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

上面將裝置分成3種，分別是寬度大於800px時，應用 styleA ，寬度在600px到800px之間時應用 styleB ，以及寬度小於600px時應用 styleC 。那假如寬度正好等於800px時該應用那個樣式？是 styleB，因為前兩條表示式都成立，按CSS預設優先順序規則後者覆蓋了前者。
因此，為了避免衝突，這個例子正常情況應該這樣寫：

<link rel="stylesheet" href="styleA.css" media="screen">  
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">  
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

三、迴歸CSS3 @media

上面我們大概講了下CSS2的媒體查詢用法，現在我們重新回到CSS3的媒體查詢，在第一段程式碼上面我用的是小於960px的尺寸的寫法，那現在我們來實現等於960px尺寸的程式碼，以下程式碼需要寫在style標籤或者css檔案中：

@media screen and (max-device-width:960px){
    body{background:red;}
}

然後就是當瀏覽器尺寸大於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:檢測輸出的裝置是網格的還是點陣圖裝置。

(max-width:599px) 
(min-width:600px) 
(orientation:portrait) 豎屏
(orientation:landscape)        橫屏
(-webkit-min-device-pixel-ratio: 2) 畫素比

五、媒體型別

1.all 所有媒體
2.braille 盲文觸覺裝置
3.embossed 盲文印表機
4.print 手持裝置
5.projection 列印預覽
6.screen 彩屏裝置
7.speech '聽覺'類似的媒體型別
8.tty 不適用畫素的裝置
9.tv 電視

六、關鍵字

1.and
2.not not關鍵字是用來排除某種制定的媒體型別
3.only only用來定某種特定的媒體型別
-很多時候是用來對那些不支援媒體特性但卻支援媒體型別的裝置

七、瀏覽器支援情況

IE8-
IE9+
Chrome 5+
Opera 10+
Firefox 3.6+<
Safari 4+

八、常用的幾種螢幕寬度設定：

@media screen and (min-width: 1200px) {
        css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
        css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
        css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
        css-code;
}
@media screen and (max-width: 479px) {
        css-code;
}

相關文章