溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關如何在CSS3中使用@media屬性，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
//語法：
@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;
}以上就是如何在CSS3中使用@media屬性，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
