ui培训媒体查询-响应式网页制作教程（一）

更新时间:2016年05月06日16时02分来源:传智播客UI培训学院浏览次数:

一、媒体查询

CSS3新增的功能，能够让我们的HTML页面，智能的根据用户的浏览器宽度，来选择性加载样式表。

在用link标记引用样式表的时候，加上media属性，表示媒体查询（media query），实际上就是让这个css，不是无条件加载的，而是当浏览器窗口满足一定的宽度的时候，再进行加载。

<link rel="stylesheet" type="text/css" href="css/1.css" media="(min-width:750px)">
<link rel="stylesheet" type="text/css" href="css/2.css" media="(max-width:749px)">

属性：

media="(min-width:750px)"

指的是当浏览器的窗口尺寸宽度，最小为750px的时候，加载样式表。换句话说，就是当用户浏览器屏幕尺寸大于等于750px的时候，才加载这个样式表。

属性：

media="(max-width:749px)"

指的是当浏览器的窗口尺寸宽度，最大为749px的时候，加载样式表。换句话说，就是当用户浏览器屏幕尺寸小于等于749px的时候，才加载这个样式表。

媒体查询功能是CSS3中的功能，IE9里面才开始兼容。智能手机（安卓、苹果、windows phone）中的浏览器都是兼容媒体查询的。

我们的绿色食品网，就是用媒体查询功能，根据用户的浏览器尺寸的宽度的不同，来更换不同的样式表。

<link href="css/pad.css" type="text/css" rel="stylesheet" media="(max-width:981px) and (min-width:620px)" />
<link href="css/mobile.css" type="text/css" rel="stylesheet" media="(max-width:619px)" />

属性：

media="(max-width:981px) and (min-width:620px)"

现在，这个样式表的加载条件是，用户的浏览器尺寸，小于等于981px且大于等于620px。
换句话说，就是当用户的浏览器尺寸在620~981之间的时候，才加载这个样式表。

属性：

media="(max-width:619px)"

小于等于619px的时候，加载这个样式表

IE6、7、8中，如果看见有media属性的link标记，会怎么样？
浏览器会忽略这样的标记。不过不用担心，因为手机里面的浏览器都是支持的。

本文版权归传智播客UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：传智播客UI培训学院
首发：http://www.itcast.cn/ui

上一篇：ui培训之流式布局弹性盒模型(三) 下一篇：ui培训媒体查询-响应式网页制作教程（二）