HTML/CSS: 媒体查询

1.INTRODUCTION

之前写过一篇关于媒体查询的博文：HTML/CSS: 通过媒体查询增加网页在设备上的兼容性。如今对媒体查询有了更深一步的了解，故这篇博文是对之前文章的补充。

在媒体查询出现之前，为适应移动设备浏览网页，网站开发者通常会开发方便移动设备访问的版本，但这通常需要大量的开发，必须建立一个子域，使用不同于父站点的样式表和HTML模板，图片也不得不重新调整大小以更好的适应小的屏幕。另外还需要创建脚本，检测用户是否使用了移动浏览器，然后重定向到相应的移动站点上。

但在媒体查询出现以后，就省下了不少麻烦：首先，他们会基于设备的属性来检测设备，这样就不需要使用浏览器探测脚本，之后允许直接安装设备的功能去设定目标样式表。

媒体查询的主要语法有三种：

// 第一种
"file" rel="stylesheet" media="logic media and (expression)">
// 第二种
@import url('file') logic media and (expression);
// 第三种
@media logic media and (expression) {rules}

2.FEATURE

(1)浏览器窗口宽度与高度

width, min-width, max-width
height, min-height, max-height

// eg.
@media media and (max-width:480px) { rules }

主要作用：根据浏览器窗口的大小设置不同的样式

(2)设备的宽度与高度

device-width, min-device-width, max-device-width
device-height, min-device-height, max-device-height

// eg.
@media media and (max-device-width:480px) { rules }

主要作用：根据设备屏幕的大小设置不同的样式

(3)方向

orientation:value value: landscape, portrait

@media media and (orientation: value) {rules}

landscape：浏览器的宽度大于高度时应用；
portrait：浏览器的宽度小于高度时应用；

主要作用：实现屏幕内容旋转(智能手机，平板电脑)

(4)高宽比

aspect-ratio
device-aspect-ratio

@media media and (aspect-ratio: horizontal/vertical) {rules}
@media media and (device-aspect-ratio:horizontal/vertical) {rules}

主要作用：根据设备的高宽比设置样式

(5)像素比

-webkit-device-pixel-ratio
-webkit-max-device-pixel-ratio
-webkit-min-device-pixel-ratio

@media media and (-webkit-device-pixel-ratio:number) {rules}
@media media and (-webkit-max-device-pixel-ratio) {rules}
@media media and (-webkit-min-device-pixel-ratio) {rules}

主要作用：根据屏幕像素比设置样式。

(6)多种媒体特征

and , ‘,’

@media logic media and (expression) and (expression) {rules}
@media logic media and (expression), media and (expression) {rules}

(7)logic

logic: only, not

@media logic media and (expression)

对于不支持该语法的浏览器隐藏规则，使用only；
对于不满足设置参数的浏览器应用规则，使用not。

---

以上内容皆为本人观点，欢迎大家提出批评和指导，我们一起探讨！

---