在之前的 屏幕大小与视区大小 这篇文章中,已经介绍了移动设备的 viewport meta tag。这里介绍与它相关的 media type 和 media query 概念。
CSS2 中可以通过 media type 对不同的浏览情形定义不同的样式。例如:
@media screen { body { font-size: 16px } } @media print { body { font-size: 12pt } } @media screen, print { body { line-height: 1.5 } }
上面 CSS 代码将对在正常浏览时设置字体大小为 16pt,而打印时设置字体大小为 12pt。上述两种情形中行高都是 1.5 倍。这个 media type 也可以用于在 html 文件中载入不同的样式表。例如:
<link type="text/css" rel="stylesheet" media="screen" href="screen.css"> <link type="text/css" rel="stylesheet" media="print" href="print.css">
实际上 media type 还有很多种,但是浏览器多半只支持 all,print,screen 这三种。
随着智能手机和平板电脑的流行,我们需要方便地让网站在不同的设备中显示不同的样式。这时候 CSS3 的 media query 就是我们所需要的。media query 扩展了 media type 的功能,增加了许多属性,如下表:
属性 | 取值 | 带 min/max 前缀 | 说明 | 例子 |
device-aspect-ratio | 整数/整数 | 能 | 设备屏幕的宽高比 | @media screen and (device-aspect-ratio: 16/9) {…} |
device-height | 长度值 | 能 | 设备屏幕的高度 | @media screen and (device-height: 600px) {…} |
device-width | 长度值 | 能 | 设备屏幕的宽度 | @media screen and (device- 800px) {…} |
height | 长度值 | 能 | 浏览界面的高度 | @media screen and (min-height: 500px) {…} |
width | 长度值 | 能 | 浏览界面的宽度 | @media screen and (min- 700px) {…} |
resolution | dpi 值或 dpcm 值 | 能 | 像素密度 | @media print and (max-resolution: 300dpi) {…} |
orientation | portrait 或 landscape | 否 | 竖屏或者横屏 | @media all and (orientation:portrait) {…} |
其中的 device-height 和 device-width 值在 iOS 设备中始终按照竖屏时给出,而在 Android 设备中会根据竖屏或横屏自动交换。
在 media query 语句中,除了 and 之外,还可以用 not 和 only 关键字。
另外,在 iOS 中还增加了 -webkit-device-pixel-ratio 属性,取值为 1 表示普通屏幕,而 取值为 2 表示 Retina 屏幕。在 Android 中也有这个属性,取值为 0.75,1.0 和 1.5 ,分别对应低、中、高像素密度的屏幕。
Media query 大多数浏览器都支持,包括 IE9,Firefox,Chrome,Safari 以及 Opera。只有 IE6-IE8 不支持。
参考资料:
[1] CSS 2.1 : Media types - W3C
[2] @media - CSS | MDN
[3] CSS 3 : Media Queries - W3C
[4] CSS media queries - CSS | MDN
[5] Media Queries (Internet Explorer) - MSDN
[6] Media queries - Wikipedia, the free encyclopedia
[7] media type与media query | CSS | 前端观察
[8] CSS3 Media Queries (媒体查询) | Kayo's Melody
[9] Use CSS3 Media Queries To Create a Mobile Website
[A] First, Understand Your Screen (result table)
[B] Combining meta viewport and media queries - QuirksBlog
[C] Targeting Device Density with CSS - Android Developers
[D] Safari CSS Reference: Supported CSS Rules
[E] CSS WG Blog - How to unprefix -webkit-device-pixel-ratio
[F] devicePixelRatio - QuirksBlog
[G] Can I use CSS3 Media Queries
[H] Combining meta viewport and media queries - QuirksBlog