詳解CSS3 Media Queries中媒體屬性的使用
我要評論媒體屬性
大多數媒體屬性帶有“min-”和“max-”前綴，用于表達“小于等于”和“大于等于”。這避免了使用與HTML和XML沖突的“<”和“>”字符。如果你未向媒體屬性指定一個值，并且該特性的實際值不為零，則該表達式被解析為真。
注意：如果瀏覽器運行的設備上沒有該屬性值，包含這個屬性值的表達式一般返回假。例如，在語音合成器上查詢屏幕長寬比總是返回假。
顏色（color）
值： <color>
媒體： visual
是否接受 min/max 前綴：是
指定輸出設備每個像素單元的比特值。如果設備不支持輸出顏色，則該值為0。
注意：如果每個顏色單元具有不同數量的比特值，則使用最小的。例如，如果顯示器為藍色和紅色提供5比特，而為綠色提供6比特，則認為每個顏色單元有5比特。如果設備使用索引顏色，則使用顏色表中顏色單元的最小比特數。
示例
向所有能顯示顏色的設備應用樣式表：
- @media all and (color) { ... }
向每個顏色單元至少有4個比特的設備應用樣式表：
- @media all and (min-color: 4) { ... }
顏色索引（color-index）
值：<integer>
媒體： visual
是否接受 min/max 前綴：是
指定了輸出設備中顏色查詢表中的條目數量。
示例
向所有使用索引顏色的設備應用樣式表，你可以這么做：
- @media all and (color-index) { ... }
向所有使用至少256個索引顏色的設備應用樣式表：
- <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
寬高比（aspect-ratio）
值：<ratio>
媒體： visual, tactile
是否接受 min/max 前綴：是
描述了輸出設備目標顯示區(qū)域的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平像素數（第一個值）與垂直像素數（第二個值）的比例。
示例
下面為顯示區(qū)域寬高至少為一比一的設備選擇了一個特殊的樣式表。
- @media screen and (min-aspect-ratio: 1/1) { ... }
這指定了寬高比或者1：1或者更大。換句話說，可視區(qū)域或者是正方形或者是寬屏。
設備寬高比（device-aspect-ratio）
值：<ratio>
媒體：visual, tactile
是否接受 min/max 前綴：是
描述了輸出設備的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平像素數（第一個值）與垂直像素數（第二個值）的比例。
示例
下面為寬屏設備選擇了一個特殊的樣式表。
- @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
寬高比或者16：9或者16：10。
設備高度（device-height）
值：<length>
媒體：visual, tactile
是否接受 min/max 前綴：是
描述了輸出設備的高度（整個屏幕或頁的高度，而不是僅僅像文檔窗口一樣的渲染區(qū)域）。
示例
向顯示在最大寬度800px的屏幕上的文檔應用樣式表，你可以這樣做：
- <link rel="stylesheet" media="screen and (max-device-width: 799px)" />
設備寬度（device-width）
值：<length>
媒體： visual, tactile
是否接受 min/max 前綴：是
描述了輸出設備的寬度（整個屏幕或頁的高度，而不是僅僅像文檔窗口一樣的渲染區(qū)域）。
網格（grid）
值：<integer>
媒體：all
是否接受 min/max 前綴： 否
判斷輸出設備是網格設備還是位圖設備。如果設備是基于網格的（例如電傳打字機終端或只能顯示一種字形的電話），該值為1，否則為0。
示例
向一個15字符寬度或更窄的手持設備應用樣式：
- @media handheld and (grid) and (max-width: 15em) { ... }
注意：“em” 在網格設備中有不同的意義；一個“em”的實際寬度不得而知，假設1em相當于一個網格單元的寬高。
高度（height）
值：<length>
媒體：visual, tactile
是否接受 min/max 前綴：是
height 媒體屬性描述了輸出設備渲染區(qū)域（如可視區(qū)域的高度或打印機紙盒的高度）的高度。
注意：用戶調整窗口大小后，火狐瀏覽器會根據使用了width和height屬性的媒體查詢來切換合適的樣式表。
黑白（monochrome）
值：<integer>
媒體： visual
是否接受 min/max 前綴：是
指定了一個黑白（灰度）設備每個像素的比特數。如果不是黑白設備，值為0。
示例
向所有黑白設備應用樣式表：
- @media all and (monochrome) { ... }
向每個像素至少8比特的黑白設備應用樣式表：
- @media all and (min-monochrome: 8) { ... }
方向（orientation）
值：landscape | portrait
媒體：visual
是否接受 min/max 前綴：否
指定了設備處于橫屏（寬度大于寬度）模式還是豎屏（高度大于寬度）模式。
示例
向豎屏設備應用樣式表：
- @media all and (orientation: portrait) { ... }
分辨率（resolution）
值： <resolution>
媒體： bitmap
是否接受 min/max 前綴：是
指定輸出設備的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的點數來表示。
示例
為每英寸至多300點的打印機應用樣式：
- @media print and (min-resolution: 300dpi) { ... }
替換老舊的 (min-device-pixel-ratio: 2) 語法：
- @media screen and (min-resolution: 2dppx) { ... }
掃描（scan）
值： progressive | interlace
媒體：tv
是否接受 min/max 前綴：否
描述了電視輸出設備的掃描過程。
示例
向以順序方式掃描的電視機上應用樣式表：
- @media tv and (scan: progressive) { ... }
寬度（width）
值： <length>
媒體： visual, tactile
是否接受 min/max 前綴：是
width 媒體屬性描述了輸出設備渲染區(qū)域（如可視區(qū)域的寬度或打印機紙盒的寬度）的寬度。
注意：用戶調整窗口大小后，火狐瀏覽器會根據使用了width和height屬性的媒體查詢來切換合適的樣式表。
示例
如果你想向最小寬度20em的手持設備或屏幕應用樣式表，你可以使用這樣的查詢：
- @media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
這個媒體查詢將向最小寬度8.5英寸的打印機應用樣式表：
- <link rel="stylesheet" media="print and (min-width: 8.5in)"
- href="http://foo.com/mystyle.css" />
這個查詢適用于寬度在500px和800px之間的屏幕：
- @media screen and (min-width: 500px) and (max-width: 800px) { ... }
實現響應式設計
這個例子可以調整你的瀏覽器窗口尺寸，我們來具體看一下：
Max Width
下面的樣式會在可視區(qū)域的寬度小于 600px 的時候被應用。
- @media screen and (max-width: 600px) {
- .class {
- background: #ccc;
- }
- }
如果你想鏈接到一個單獨的樣式表，把下面的代碼放在<head>標簽里。
- <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Min Width
下面的樣式會在可視區(qū)域的寬度大于 900px 的時候被應用。
- @media screen and (min-width: 900px) {
- .class {
- background: #666;
- }
- }
Multiple Media Queries
你還可以使用過個匹配條件，下面的樣式會在可視區(qū)域的寬度在 600px 和 900px 之間的時候被應用。
- @media screen and (min-width: 600px) and (max-width: 900px) {
- .class {
- background: #333;
- }
- }
Device Width
下面的樣式會在 max-device-width 是 480px 的設備上觸發(fā)。（提示：max-device-width 是設備的實際分辨率，而 max-width 指的是可視區(qū)域分辨率。）
- @media screen and (max-device-width: 480px) {
- .class {
- background: #000;
- }
- }
For iPhone 4
下面的樣式是為 iPhone 4 專門寫的 (作者: Thomas Maier)。
- <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
For iPad
你還可以使用 media query 在 iPad 上檢測方向(portrait or landscapse)
CSS Code復制內容到剪貼板
- <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
- <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
相關文章
詳解CSS3媒體查詢響應式布局bootstrap 框架原理實戰(zhàn)(推薦)
這篇文章主要介紹了詳解CSS3媒體查詢響應式布局bootstrap 框架原理實戰(zhàn)(推薦),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的2020-11-16css3媒體查詢中device-width和width的區(qū)別詳解
這篇文章主要介紹了css3媒體查詢中device-width和width的區(qū)別詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小2020-03-27- 這篇文章主要介紹了css3 響應式媒體查詢的示例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-25
- 這篇文章主要介紹了css3中媒體查詢結合rem布局適配手機屏幕,需要的朋友可以參考下2019-06-10
- 這篇文章主要介紹了CSS3媒體查詢基本學習教程,包括基本的語法和邏輯操作符,以及媒體查詢可檢測的特性與利用viewport禁止用戶縮放等部分的內容,需要的朋友可以參考下2016-02-29
使用CSS媒體查詢(Media Queries)和JavaScript判斷瀏覽器設備類型的方法
有無數的理由要求我們在任何時候都應該知道用戶是使用的什么設備瀏覽我們的網站——寬屏，普通屏，平板，手機？知道這些特征，我們web應用的CSS和JavaScript才能同步做相應2014-04-03- 媒體類型：all 所有設備、screen 電腦顯示器等等；媒體特性共13種，可以說是一個類似CSS屬性的集合，感興趣的朋友可以了解下本文，希望對大家有所幫助2013-09-12
- 這篇文章主要介紹了CSS3媒體查詢實現不同寬度的下不同內容的展示功能,本章節(jié)我們將為大家演示一些多媒體查詢實例，需要的朋友可以參考下2023-11-27
