媒体查询和移动端浏览器尺寸 - 快车库

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