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