媒體查詢和移動端瀏覽器尺寸

css的媒體查詢容許經過@media標籤爲特定媒體的瀏覽器設定樣式，其中包含衆多篩選，功能強大。

@media 的語法以下

@media <media types> {
  /* media-specific rules */
}

media types 容許的值包括：

all
braille
embossed
handheld
print
projection
screen
speech
tty
tv

同時設定兩個媒體能夠經過逗號

@media screen, print {
  body { line-height: 1.2 }
}

以上詳見：
https://developer.mozilla.org/en-US/docs/Web/CSS/@media

媒體查詢 CSS media queries

媒體查詢能夠經過媒體的一些特定來設定特殊的樣式，好比

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

注意： 若是有一項媒體查詢，也是須要括號的，如下代碼是無效的

@media min-width: 700px { ... }/*無效！沒有括號*/

媒體查詢包括四種邏輯運算符

-and

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

-逗號分隔(or)

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

-not
not 對整句查詢起效

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

等價於

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

而不是

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

-only

@media only (min-width: 300px) { ... }

媒體屬性特徵 Media features

大多數媒體屬性包含min- max-前綴含義以下

• min- : 大於等於
• max- : 小於等於

一些媒體屬性特徵：

device-aspect-ratio：設備寬高比
device-height：設備高度
device-width：設備寬度
height：輸出高度
width：輸出寬度
orientation：設備模式，橫向或者縱向 landscape or portrait
resolution：分辨率

以上內容大多來自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

媒體寬高

iphone4 的 viewport 爲 640*960,devicePixelRatio = 2
它的輸出寬高就是 (640/2) * (960/2) 是 320 * 480, 媒體屬性裏的height,width對應的就是計算出來的寬高，而device-height 和device-width 則是640 * 960

適配iphone4的css能夠這麼寫

@media (min-width: 320px) and (max-width: 480px) { ... }

設備分辨率能夠在這裏http://viewportsizes.com/ 查詢