CSS媒體查詢的應用 · doc

在CSS3中添加的媒體查詢，允許內容的呈現針對一個特定范圍的輸出設備而定制，而不必改變內容本身。 Media Queries能在不同的條件下使用不同的樣式，使用頁面達到不同的渲染效果。 [MDN CSS媒體查詢](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries#分辨率（resolution）) ### 媒體類型 1. all 所有媒體 2. braille 盲文觸覺設備 3. embossed 盲文打印機 4. print 手持設備 5. projection 打印預覽 6. screen 彩屏設備 7. speech ‘聽覺’類似的媒體類型 8. tty 不適用像素的設備 9. tv 電視 [媒體類型](http://www.runoob.com/css/css-mediatypes.html) ~~~ @media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} } @media screen,print { p.test {font-weight:bold;} } /*移動端樣式*/ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } ~~~ sans - serif 字體比較適合在屏幕上閱讀，而 serif 字體更容易在紙上閱讀。媒體查詢包含一個可選的媒體類型和零個或多個滿足CSS3規范的表達式. * 表達式描述了媒體特征, 最終會被解析為 true 或 false. * 如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設備類型, 并且所有的表達式的值都是 true, 那么該媒體查詢的結果為 true ~~~  <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />  <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style> ~~~ 邏輯操作符可以使用 not，and 和 only 等邏輯操作符構建復雜的媒體查詢。 1. and 操作符用來把多個媒體屬性組合成一條媒體查詢。只有當每個屬性都為真時，結果才為真。 2. not 操作符用來對一條媒體查詢的結果進行取反。 3. only 操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式。若使用了 not 或 only 操作符，必須明確指定一個媒體類型。默認為 all 所有媒體類型。 and 用于合并多個媒體屬性或合并媒體屬性與媒體類型 ~~~ @media (min-width: 700px) and (orientation: landscape) { ... } @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* 逗號分隔相當于or操作符 */ @media (min-width: 700px), handheld and (orientation: landscape) { ... } ~~~ not 用來排除某種制定的媒體類型，換句話來說就是用于排除符合表達式的設備 ~~~ <link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" /> ~~~ only 僅在媒體查詢匹配成功的情況下應用指定樣式 ~~~ <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /> ~~~ ### 語法 ~~~ @media mediatype and | not | only (media feature) { css-code; } ~~~ ### 常用媒體屬性 1. 設備寬度：device-width | min-device-width | max-device-width 2. 設備高度：device-height | min-device-height | max-device-height 3. 設備寬度比：device-aspect-ratio: 16/9 4. 設備方向：orientation: portrait / landscape 5. 設備輸出分辯率：min-resolution: 300dpi | min-resolution: 2dppx 6. 屏幕像素比：min-device-pixel-ratio: 2 | min–moz-device-pixel-ratio | -webkit-min-device-pixel-ratio 7. 渲染區域的寬度： width | min-width | max-width 8. 渲染區域的高度： height | min-height | max-height 設備輸出分辯率(打印分辯率)：dpi, dpcm, dppx 指定輸出設備的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的點數來表示。每英寸包含點的數量（dots per inch）普通屏幕通常包含96dpi，一般將2倍于此的屏幕稱之為高分屏，即大于等于192dpi的屏幕，比如Mac視網膜屏就達到了192dpi（即2dppx），打印時一般會需要更大的dpi； 1dppx = 96dpi 1dpi ≈ 0.39dpcm 1dpcm ≈ 2.54dpi [分辨率PPI與DPI](http://blog.csdn.net/wuyao721/article/details/5286753) Media query只接受單個的邏輯表達式作為其值或者沒有值 Media Query其中的大部分接受min/max前綴，用來表示其邏輯關系，表示應用于大于等于或者小于等于某個值的情況著作權歸作者 ### 橫豎屏的判斷 ~~~ @media (orientation : landscape){ /* 橫屏 */ } @media (orientation : portrait){ /* 豎屏 */ } ~~~ 注意部分 Android 中有bug 當輸入框獲得焦點，觸發彈出鍵盤后，橫屏的樣式出現了，然而他使用的是豎屏，并未把手機橫過來。添加寬度限制，屏幕寬度大于450px時，并且是橫屏時，應用橫屏樣式 ~~~ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape){ // CSS Style } @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait){ // CSS Style } ~~~ ### 高清圖片適配在普通屏下使用@1x圖片，在高清屏下使用@2x圖片 ~~~ /* 普通顯示屏(設備像素比例小于等于1.3)使用1倍的圖 */ .bg{ background-image: url(img_1x.png); } /* 高清顯示屏(設備像素比例大于等于1.5)使用2倍圖 */ @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi), only screen and (min-resolution: 1.25dppx){ ratio:1.5){ .bg{ background-image: url(img_2x.png); } } ~~~ ### 屏幕適配移動端配合 rem 使用，適配不同寬度的屏幕 ~~~ html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}} @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}} @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}} @media screen and (min-width:800px){html{font-size:25px}} ~~~ ### 適配獨立的樣式文件 ~~~ <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/print.css" rel="stylesheet" type="text/css" media="print" /> <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> ~~~ ### 設備判斷 ~~~ @media screen and (device-aspect-ratio: 40/71) {} 或者： @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){} ~~~ ### 調整模塊的樣式 ~~~ @media screen and (max-width: 980px) { #pagewrap { width: 95%; } #content { width: 60%; padding: 3% 4%; } #sidebar { width: 30%; } #sidebar .widget { padding: 8% 7%; margin-bottom: 10px; } } ~~~ ### 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: 檢測輸出的設備是網格的還是位圖設備。 ~~~