本篇文章給大家分享的是有關(guān)如何在CSS3中使用@media屬性，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)公司自2013年起，先為寧縣等服務(wù)建站，寧縣等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為寧縣企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

//語法：
@media mediatype and | not | only (media feature) { css-code; }
//也可以針對不同的媒體使用不同的stylesheets: 

一、首先是標(biāo)簽

這段代碼的幾個參數(shù)解釋：

• width = device-width：寬度等于當(dāng)前設(shè)備的寬度

• initial-scale：初始的縮放比例（默認(rèn)設(shè)置為1.0）

• minimum-scale：允許用戶縮放到的最小比例（默認(rèn)設(shè)置為1.0）

• maximum-scale：允許用戶縮放到的最大比例（默認(rèn)設(shè)置為1.0）

• user-scalable：用戶是否可以手動縮放（默認(rèn)設(shè)置為no，因為我們不希望用戶放大縮小頁面）

二、標(biāo)簽中引入（CSS2 media）

其實并不是只有CSS3才支持Media的用法，早在CSS2開始就已經(jīng)支持Media，具體用法，就是在HTML頁面的head標(biāo)簽中插入如下代碼：

例如我們想知道現(xiàn)在的移動設(shè)備是不是縱向放置的顯示屏，可以這樣寫：

頁面寬度小于960的執(zhí)行指定的樣式文件：

既然CSS2可以實現(xiàn)CSS的這個效果為什么不用這個方法呢，很多人應(yīng)該會問，但是上面這個方法，最大的弊端是他會增加頁面http的請求次數(shù)，增加了頁面負(fù)擔(dān)，我們用CSS3把樣式都寫在一個文件里面才是最佳的方法。

下面來解釋一下遇到?jīng)_突時的機制：

上面將設(shè)備分成3種，分別是寬度大于800px時，應(yīng)用 styleA ，寬度在600px到800px之間時應(yīng)用 styleB ，以及寬度小于600px時應(yīng)用 styleC 。那假如寬度正好等于800px時該應(yīng)用那個樣式？是 styleB，因為前兩條表達(dá)式都成立，按CSS默認(rèn)優(yōu)先級規(guī)則后者覆蓋了前者。

因此，為了避免沖突，這個例子正常情況應(yīng)該這樣寫：

三、回歸CSS3 @media

上面我們大概講了下CSS2的媒體查詢用法，現(xiàn)在我們重新回到CSS3的媒體查詢，在第一段代碼上面我用的是小于960px的尺寸的寫法，那現(xiàn)在我們來實現(xiàn)等于960px尺寸的代碼，以下代碼需要寫在style標(biāo)簽或者css文件中：

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

然后就是當(dāng)瀏覽器尺寸大于960px時候的代碼了：

@media screen and (min-width:960px){ 
    body{background:orange;}
}

我們還可以混合使用上面的用法：

@media screen and (min-width:960px) and (max-width:1200px){
    body{background:yellow;}
}

上面的這段代碼的意思是當(dāng)頁面寬度大于960px小于1200px的時候執(zhí)行下面的CSS。

四、Media所有參數(shù)匯總

以上就是我們最常需要用到的媒體查詢器的三個特性，大于，等于，小于的寫法。媒體查詢器的全部功能肯定不止這三個功能，下面是我總結(jié)的它的一些參數(shù)用法解釋：

• width:瀏覽器可視寬度。

• height:瀏覽器可視高度。

• device-width:設(shè)備屏幕的寬度。

• device-height:設(shè)備屏幕的高度。

• orientation:檢測設(shè)備目前處于橫向還是縱向狀態(tài)。

• aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(例如：aspect-ratio:16/9)

• device-aspect-ratio:檢測設(shè)備的寬度和高度的比例。

• color:檢測顏色的位數(shù)。（例如：min-color:32就會檢測設(shè)備是否擁有32位顏色）

• color-index:檢查設(shè)備顏色索引表中的顏色，他的值不能是負(fù)數(shù)。

• monochrome:檢測單色楨緩沖區(qū)域中的每個像素的位數(shù)。（這個太高級，估計咱很少會用的到）

• resolution:檢測屏幕或打印機的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

• grid:檢測輸出的設(shè)備是網(wǎng)格的還是位圖設(shè)備。

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

五、媒體類型

1.all 所有媒體

2.braille 盲文觸覺設(shè)備

3.embossed 盲文打印機

4.print 手持設(shè)備

5.projection 打印預(yù)覽

6.screen 彩屏設(shè)備

7.speech '聽覺'類似的媒體類型

8.tty 不適用像素的設(shè)備

9.tv 電視

六、關(guān)鍵字

1.and

2.not not關(guān)鍵字是用來排除某種制定的媒體類型

3.only only用來定某種特定的媒體類型

-很多時候是用來對那些不支持媒體特性但卻支持媒體類型的設(shè)備

七、瀏覽器支持情況

IE8-

IE9+

Chrome 5+

Opera 10+

Firefox 3.6+<

Safari 4+

八、常用的幾種屏幕寬度設(shè)定：

@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;
}

以上就是如何在CSS3中使用@media屬性，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。