1.INTRODUCTION
之前写过一篇关于媒体查询的博文:HTML/CSS: 通过媒体查询增加网页在设备上的兼容性。如今对媒体查询有了更深一步的了解,故这篇博文是对之前文章的补充。
在媒体查询出现之前,为适应移动设备浏览网页,网站开发者通常会开发方便移动设备访问的版本,但这通常需要大量的开发,必须建立一个子域,使用不同于父站点的样式表和HTML模板,图片也不得不重新调整大小以更好的适应小的屏幕。另外还需要创建脚本,检测用户是否使用了移动浏览器,然后重定向到相应的移动站点上。
但在媒体查询出现以后,就省下了不少麻烦:首先,他们会基于设备的属性来检测设备,这样就不需要使用浏览器探测脚本,之后允许直接安装设备的功能去设定目标样式表。
媒体查询的主要语法有三种:
// 第一种
<link href="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。
以上内容皆为本人观点,欢迎大家提出批评和指导,我们一起探讨!