CSS3媒體查詢MediaQueries怎么用

本篇文章為大家展示了CSS3媒體查詢MediaQueries怎么用，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

語法

媒體查詢包含了一個媒體類型 和如CSS3規范中描述的包含一個或多個表達式的媒體屬性，這些媒體屬性會被解析成真或假。如果媒體查詢中的媒體類型與文檔要展示的設備相符則查詢結果為真，并且媒體查詢中的所有表達式為真。

CSS Code復制內容到剪貼板

1. <!-- link元素中的CSS媒體查詢 -->   
   <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />   
     
   <!-- 樣式表中的CSS媒體查詢 -->   
   <style>   
   @media (max-width: 600px) {   
     .facet_sidebar {   
       display: none;   
     }   
   }   
   </style>

當媒體查詢為真時，相關的樣式表或樣式規則就會按照正常的級聯規則被應用。即使媒體查詢返回假， <link> 標簽上帶有媒體查詢的樣式表 仍將被下載 （只不過不會被應用）。

在不使用 not 或 only 操作符的情況下，媒體類型是可選的，默認為 all 。

邏輯操作符

操作符 not，and 和 only 可以用來構建復雜的媒體查詢。
and 操作符用來把多個 媒體屬性 組合起來，合并到同一條媒體查詢中。只有當每個屬性都為真時，這條查詢的結果才為真。
not 操作符用來對一條媒體查詢的結果進行取反。
only 操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式。可以通過它讓選中的樣式在老式瀏覽器中不被應用。
若使用了 not 或 only 操作符，必須明確指定一個媒體類型。

你也可以將多個媒體查詢以逗號分隔放在一起；只要其中任何一個為真，整個媒體語句就返回真。相當于 or 操作符。

and

and 關鍵字用于合并多個媒體屬性或合并媒體屬性與媒體類型。一個基本的媒體查詢，即一個媒體屬性與默認指定的 all媒體類型，可能像這樣子：

CSS Code復制內容到剪貼板

1. @media (min-width: 700px) { ... }  

如果你只想在橫屏時應用這個，你可以使用 and 操作符合并媒體屬性：

CSS Code復制內容到剪貼板

1. (min-width: 700px) and (orientation: landscape) { ... }  

現在上面的媒體查詢僅在可視區域寬度不小于700像素并在在橫屏時有效。如果，你僅想再電視媒體上應用，你可以使用 and 操作符合并媒體屬性：

CSS Code復制內容到剪貼板

1. @media tv and (min-width: 700px) and (orientation: landscape) { ... }  

現在，上面媒體查詢僅在電視媒體上，可視區域不小于700像素寬度并且是橫屏時有效。

逗號分隔列表

媒體查詢中使用逗號分隔效果等同于 or 邏輯操作符。當使用逗號分隔的媒體查詢時，如果任何一個媒體查詢返回真，樣式就是有效的。逗號分隔的列表中每個查詢都是獨立的，一個查詢中的操作符并不影響其它的媒體查詢。這意味著逗號媒體查詢列表能夠作用于不同的媒體屬性、類型和狀態。

例如，如果你想在最小寬度為700像素或是橫屏的手持設備上應用一組樣式，你可以這樣寫：

CSS Code復制內容到剪貼板

1. @media (min-width: 700px), handheld and (orientation: landscape) { ... }  

如上文，如果是一個800像素寬的屏幕設備，媒體語句將會返回真，因為第一部分相當于 @media all and (min-width: 700px) 將會應用于該設備并且返回真，盡管我的屏幕媒體類型并不與第二部分的手持媒體類型相符。同樣地，如果我是一個500像素寬的橫屏手持設備，盡管第一部分因為寬度問題而不匹配，第二部分仍會成功，因此整個媒體查詢返回真。

not

not 關鍵字應用于整個媒體查詢，在媒體查詢為假時返回真 (比如 monochrome 應用于彩色顯示設備上或一個600像素的屏幕應用于 min-width: 700px 屬性查詢上 )。在逗號媒體查詢列表中 not 僅會否定它應用到的媒體查詢上而不影響其它的媒體查詢。 not 關鍵字僅能應用于整個查詢，而不能單獨應用于一個獨立的查詢。例如，not 在下面的查詢中最后被計算：

CSS Code復制內容到剪貼板

1. @media not all and (monochrome) { ... }  

等價于：

CSS Code復制內容到剪貼板

1. @media not (all and (monochrome)) { ... }  

而不是：

CSS Code復制內容到剪貼板

1. @media (not all) and (monochrome) { ... }  

另一個例子，看下面的媒體查詢：

CSS Code復制內容到剪貼板

1. @media not screen and (color), print and (color)  

等價于：

CSS Code復制內容到剪貼板

1. @media (not (screen and (color))), print and (color)  

only

only 關鍵字防止老舊的瀏覽器不支持帶媒體屬性的查詢而應用到給定的樣式：

CSS Code復制內容到剪貼板

1. <link rel="stylesheet" media="only screen and (color)" href="example.css" />  

偽范式

CSS Code復制內容到剪貼板

1. media_query_list: <media_query> [, <media_query> ]*   

2. media_query: [[only | not]? <media_type> [ and <expression> ]*]   

3.   | <expression> [ and <expression> ]*   

4. expression: ( <media_feature> [: <value>]? )   

5. media_type: all | aural | braille | handheld | print |   

6.   projection | screen | tty | tv | embossed  

7. media_feature: width | min-width | max-width  

8.   | height | min-height | max-height  

9.   | device-width | min-device-width | max-device-width  

10.   | device-height | min-device-height | max-device-height  

11.   | aspect-ratio | min-aspect-ratio | max-aspect-ratio   

12.   | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio   

13.   | color | min-color | max-color  

14.   | color-index | min-color-index | max-color-index   

15.   | monochrome | min-monochrome | max-monochrome   

16.   | resolution | min-resolution | max-resolution   

17.   | scan | grid  

媒體查詢是大小寫不敏感的。包含未知媒體類型的查詢通常返回假。

注意: 表達式需要用圓括號。沒有使用的會引起錯誤。

媒體查詢可檢測的特性
width：視口寬度
height：視口高度
device-width：渲染表面的寬度(對我們來說,就是設備屏幕的寬度)
device-height：渲染表面的高度(對我們來說,就是設備屏幕的高度)
orientation：檢查設備處于橫向還是縱向
aspect-ratio：基于視口寬度和高度的寬高比。一個 16∶9 比例的顯示屏可以這樣定義 aspect-ratio: 16/9
device-aspect-ratio：和 aspect-ratio 類似,基于設備渲染平面寬度和高度的寬高比
color:每種顏色的位數。例如 min-color: 16 會檢測設備是否擁有 16 位顏色。
color-index:設備的顏色索引表中的顏色數。值必須是非負整數。
monochrome:檢測單色幀緩沖區中每像素所使用的位數。值必須是非負整數,如
monochrome: 2
resolution:用來檢測屏幕或打印機的分辨率,如 min-resolution: 300dpi。還可以接受每厘米像素點數的度量值,如 min-resolution: 118dpcm。
scan:電視機的掃描方式,值可設為 progressive(逐行掃描)或 interlace(隔行掃描)。如 720p HD 電視(720p 的 p 即表明是逐行掃描)匹配 scan: progressive,而 1080i HD 電視(1080i 中的 i 表明是隔行掃描)匹配 scan: interlace。
grid:用來檢測輸出設備是網格設備還是位圖設備。
除 scan 和 grid 之外,都可使用 min 和 max 前綴來創建一個查詢范圍，如min-width:200px、max-width:360px。

利用viewport禁止用戶縮放

CSS Code復制內容到剪貼板

1. <meta name="viewport" content="width=device-width,initial-scale=1.0" />  

meta標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽； 尤其要注意的是content里多個屬性的設置一定要用分號+空格來隔開，如果不規范將不會起作用。
width viewport 寬度(數值/device-width)

height viewport 高度(數值/device-height)

initial-scale 初始縮放比例

maximum-scale 最大縮放比例

minimum-scale 最小縮放比例

user-scalable 是否允許用戶縮放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經刪除），可以在頁面加載時最小化上下狀態欄。

注意：關于viewport，還有一個很重要的概念是：iphone 的safari 瀏覽器完全沒有滾動條，而且不是簡單的“隱藏滾動條”， 是根本沒有這個功能。iphone 的safari 瀏覽器實際上從一開始就完整顯示了這個網頁，然后用viewport 查看其中的一部分。 當你用手指拖動時，其實拖的不是頁面，而是viewport。瀏覽器行為的改變不止是滾動條，交互事件也跟普通桌面不一樣。

上述內容就是CSS3媒體查詢MediaQueries怎么用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。