移动端媒体尺寸_媒体查询和移动端浏览器尺寸

css的媒体查询允许通过@media标签为特定媒体的浏览器设定样式，其中包含众多筛选，功能强大。

@media 的语法如下

@media {

/* media-specific rules */

}

media types 允许的值包括：

all

braille

embossed

handheld

print

projection

screen

speech

tty

tv

同时设定两个媒体可以通过逗号

@media screen, print {

body { line-height: 1.2 }

}

媒体查询 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：分辨率

媒体宽高

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) { ... }