1. 什麽是媒體查詢

根據設備顯示器的特性設置特定的CSS樣式。由一個或多個檢測媒體特性的條件表達式組成。

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

2.使用。

（1）

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

如果寬度小於300px改變背景顏色。 如果換成min-width 則是 大於300px再改變。

（2）可以根據不同的媒體使用不同的樣式文件

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

3.常用屬性

寬高比（aspect-ratio）

值：<ratio>

媒體： media/visual, media/tactile
是否接受 min/max 前綴：是

描述了輸出設備目標顯示區域的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平像素數（第一個值）與垂直像素數（第二個值）的比例。

@media screen and (min-aspect-ratio: 1/1) { ... }

設備寬高比（device-aspect-ratio）

值：<ratio>
媒體：media/visual, media/tactile
是否接受 min/max 前綴：是

描述了輸出設備的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平像素數（第一個值）與垂直像素數（第二個值）的比例

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

設備高度/高度（device-height）(device-width)

值：<length>
媒體：media/visual

描述了輸出設備的高度（整個屏幕或頁的高度，而不是僅僅像文檔窗口一樣的渲染區域）。

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

方向（orientation）

值：landscape | portrait
媒體：media/visual
是否接受 min/max 前綴：否

指定了設備處於橫屏（寬度大於高度）模式還是豎屏（高度大於寬度）模式。

@media all and (orientation: portrait) { ... }

分辨率（resolution）

值： <resolution>
媒體： bitmap
是否接受 min/max 前綴：是

指定輸出設備的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的點數來表示。

@media print and (min-resolution: 300dpi) { ... }

參考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

其他：

兼容一動設備的展示效果

1.<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，因為我們不希望用戶放大縮小頁面）

2.<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

讓IE的文檔模式永遠都是最新的，chrome=1如果有的用戶電腦裏面裝了這個chrome的插件，

就可以讓電腦裏面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算，無比給力，

不過如果用戶沒裝這個插件，那這段代碼就會讓IE以最高的文檔模式展現效果

3.<meta name="format-detection" content="telephone=no" />

iphone則手機號碼不被顯示為撥號鏈接

4.ios設備對meta定義的私有屬性：（可以添加至主屏幕）
<meta name="apple-mobile-web-app-capable" content="yes" />
5.<meta name="apple-mobile-web-app-status-bar-style" content="black" />
在web app應用下狀態條（屏幕頂部條）的顏色；
默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
若值為“black-translucent”將會占據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。

css媒體查詢