一、Media Type
HTML4
和 CSS2
支持针对不同媒体类型(Media Type
)定制不同的媒体样式。
在 HTML
中可以这样使用
在样式表中可以这样写:
规范定义很多媒体类型,但是都支持的浏览器确是很少,不过大都会支持这两个类型:screen & print
二、Media Query
Media Query
在 Media Type
的基础上添加了对CSS属性的判断,所以它实际上是一个逻辑表达式。
OR (media query list)
媒体查询列表即包含着多个媒体查询条件,只要符合一条即返回 true
,即逻辑或的处理逻辑。如果列表为空,相当于返回 true
。
all
all
关键字表示适用于所有媒体类型,如果不明确媒体类型的话默认就是 all
not/only
not
用来指定某个的媒体查询条件,而 only
用来指定某种媒体查询条件,用来排除不支持媒体查询的浏览器
支持的属性
width
:布局视口的宽度height
:布局视口的高度device-width
:设备的宽度device-height
:设备的高度device-aspect-ratio
:设备像素比orientation
:横屏(lanscape) 或者 竖屏(portrait)…
PS:这里只列出经常使用的属性
列出来这些属性之后,我发现少了我们最经常使用的 device-pixel-ratio
,但是文档也没有提到它,后来在 caniuse 发现 device-pixel-ratio
竟然标记为 older not standard device-pixel-ratio media query
。。。写了那么久以为是 standard
,太孤陋寡闻了~
Resolution
resolution
描述设备的分辨率(像素密度),单位有 dpi & dpcm
以及后来新增的 dppi
dpi
:dot per inch
dpcm
:dot per centimeter
dppi
:dot per pixel
简单的说就是 resolution
定义了 1px || 1 inch || 1 cm CSS
像素包含了多少个 物理像素点
。
例如 iphone retina
的设备像素比是 2
,那么完整的写法是:
PS:1dppi = 96dpi
至于为什么 device-pixel-ratio
不添加到规范中,可以看看 这篇文章
三、兼容性
Media Query Feature
IE | Chrome | FireFox | Safari | Opera | IOS Safari | Android |
---|---|---|---|---|---|---|
9+ | 4+ | 3.5+ | 3.1+ | 10.1+ | 3.2+ | 2.1+ |
从 上表 以及 caniuse 可以看出,除了 IE8-
之外,其他浏览器都是支持 Media Query
的,真是非常赞!
Resolution Feature
IE
:IE9+
支持,但是只支持dpi
Chrome
:4 - 28
支持device-pixel-ratio
,28+
支持resolution
最小:
-min-webkit-device-pixel-ratio
最大:
-max-webkit-device-pixel-ratio
Firefox
:16-
支持device-pixel-ratio
,对于resolution
只支持dpi
;最小:
min--moz-device-pixel-ratio
最大:
max--moz-device-pixel-ratio
safari
:目前只支持device-pixel-ratio
,且要加-webkit-
opera
:10.1 - 11.5
支持device-pixel-ratio
,12.1+
开始支持resolution
webkit
下的2
要写成2/1
,1
即要写成1/1
android
:2.3 - 4.3
支持device-pixel-ratio
,4.4+
开始支持resolution
所以,针对高像素密度的屏幕适配如下:
Refer
- Media Query W3C SPEC
- unprefix-webkit-device-pixel-ratio
- resolution-units
- retina-display-media-query
- iPhone iPad Media Query
End.