×
打开微信“扫一扫”，关注我们官方微信^_^
为什么响应式网站设计需要媒体查询
没有CSS3的媒体查询模块，就不能针对设备特性(如视口宽度)设置特定的CSS样式。
如果你仔细研读W3C关于CSS3媒体查询模块的规范，就会看到媒体查询的官方解释:
HTML4和CSS 2目前支持为不同的媒体类型设定专有的样式表。比如，一个页面在屏幕上显示时使用无衬线字体，而在打印时则使用衬线字体。screen和print是两种已定义的媒体类型。媒体查询让样式表有更强的针对性，扩展了谋体类型的功能。
谋体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width, height和color(等)。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
CSS媒体查询到底长什么样，更重要的是，它是怎么起作用的?
将下面这段代码插人到任意某个Css文件的最后，然后预览与之关联的网页:
body{
background-color: #fff;
}
@media screen and (max-width: 960px){
body{
background-color: #ccc;
}
}
@media screen and (max-width: 768px){
body{
background-color: #f60;
}
}
@media screen and (max-width: 550px){
body{
background-color: #080;
}
}
@media screen and (max-width: 320px){
body{
background-color: #f57575;
}
}
在现代浏览器(如果是IE，至少要IE9)中浏览该网页并不断调整浏览器窗口宽度。页面的背景颜色就会根据当前的视口尺寸而发生变化。为了清晰起见，我在这里使用了颜色名称，但实际上最好使用十六进制颜色值，如#ffffff。
接下来，让我们继续分析媒体查询，学习如何对其进行充分利用。
如果经常使用CSS 2样式表，你就知道可以通过links标签的media属性为样式表指定设备类型(如显示屏或打印机)。具体说来，就是在HTML页面的[heady标签中插入一个如下面代码片段所示的link标签:
<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">
媒体查询则能使我们根据设备的各种功能特性来设定相应的样式，而不仅仅只针对设备类型。可以将媒体查询想象成对浏览器的提问。如果浏览器回答“是”，则应用样式;如果回答是“否”，则不应用样式。相对于在CSS 2中能且只能间浏览器“你是一块显示屏吗?”，媒体查询能问的问题要多一点。例如，媒体查询可以问:“你是一块纵向放置的显示屏吗?”我们看看对应的实际代码:
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css">
也可以将多个表达式组合在一起。如，我们扩展一下前面的例子，限制只有视口宽度大于800像素的显示屏设备才能加载文件。
<link rel="stylesheet" media="screen and (orientation:portrait)and (min-width: 800px)" href="800wide-portrait-screen.css">
更进一步，还可以写一个媒体查询列表。查询列表中的任意一个查询为真，则加载文件。
全部查询都不为真，则不加载。例子如下:
<link rel="stylesheet" media="screen and (orientation:portrait)and (min-width: 800px),projection" href="800wide-portrait-screen.css">
这里有两点需要注意。第一，媒体查询之间使用逗号分隔。第二，你会注意到在
projection之后，没有and，也没有任何特幽值的组合。没有后续表达式，意味着只要是projection就满足条件。本例中，样式会应用于所有的投影仪。
和以前编写Css规则一样，基于媒体查询也可以按条件加载样式。在上面的例子中，我们在向页面的<head></head>标签中链接CSS文件时使用了媒体查询。除此之外，我们
还可以在Css样式表中使用媒体查询。例如，将下面的代码插人样式表，在屏幕宽度小于等于400像素的设备上，hl元素的文字颜色就会变成绿色。
@media screen and (max一device一width:400px){
h1{color:green}
还可以使用CSS的@import指令在当前样式表中按条件引人其他样式表。例如下面的代码会给视口最大宽度为360像素的显示屏设备加载一个名为phone .Css的样式表。
@import url("phone.css")screen and (max一width:360px);
切记，使用Css的@import方式会增加HTTP请求(这会影响加载速度)，所以请谨慎使用该方法。
相关文章：
本文由梦创义网站建设(www.mcykj.com)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设方案报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.
本文地址：https://www.mcykj.com/show-78-262-1.html转载请注明出处！
界面设计日新月异，梦创义坚持基于用户需求的界面创新设计……
互联网的格局发生的改变，在我们进行设计服务时更是考虑不同用户、不同……
洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进……
北京梦创义科技有限公司成立于2012年
创始人以及初创团队成员均来自各大互联网公司
目前公司拥有员工近百人 平均3年以上从业经验
核心团队成员均有10年以上互联网从业经验
手机：13910811300
电话：010-52661970
传真：010-82694569
网址：www.mcykj.com
邮箱：13910811300@126.com
朝阳一部：朝阳区紫芳路九号院广顺园2号楼2605A
海淀二部：回龙观黄平路19号院泰华龙旗广场E座1212室(距西三旗桥2公里，8号线育新站海淀昌平交界）
