媒体查询
在用bootstrap时了解了一下媒体查询，但是没有深入的看，前几天在慕课网上看了一下系统的介绍。在现在越来越多的屏幕出现，也要求我们前端，适应各种各样的尺寸，让我们在这条道路上越走越远。（其实很苦逼)
首先媒体查询其实是在css2就已经出现的，而且定义了各种媒体类型，只是用的是可能不太多，或者说因为我没有用:-D，渐渐 的css3出来了而且加入了media Queries 模块，这个模块可以添加媒体查询的表达式，指定媒体的类型，然后根据媒体类型来选择使用的样式，也就是说，在我们在改变页面尺寸的同时，是满足条件的布局样式精确的适用在不同的设备上，增加我们的用户体验。
在现在，很多的设备上，浏览器的尺寸可能是不同的，如果只针对某窗口的尺寸制作网页，在其他设备上就会出现很多问题，如果针对不同的尺寸是做不同的网页，那制作的页面就很多，那么css3的media queries模块就派上了用场，我们只需要针对不同的浏览器窗口尺寸编写不同的样式，，然后浏览器根据不同的窗口尺寸来选择不同的样式。Media Queries已经有好多浏览器支持了（firefox,safari,chrome, opera IE8+）应该都是支持的。
说一下格式
媒体查询很多种，实际我们常用的，link标签，@imput 和css3新增的 @ media这几种，分别的方法：
<link rel="stylesheet" tyle="text/css" hre="style.css" media="screen">
<link rel="stylesheet" tyle="text/css" hre="print.css" media="print">
通过link标签media属性来指定不同的媒体类型。
@import 方法
@import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。
@importurl（reset.css） screen;
@importurl (style.css) print;
在link中的<style>中引用媒体类型方法
<head>
<style>
@importurl(style.css) all;
</style>
</head>
@media 方法
这个方法和@import有点类似，同样也是两种发放
在样式文件引用媒体类型
@media screen {选择器{/*你的样式代码写在这里…*/}
在head标签中的style中引用
<head>
<style>
@media screen { 选择器{/*你的样式代码写在这里…*/} }
</style>
</head>
基本的介绍就是这些，我自己尝试了一下，大多数的移动浏览器
是没问题的，但是苹果设备上总是得不到想要的效果，我就搜搜了搜，
width，height指浏览器的视区尺寸，device-width，device-height设备尺寸，我们所期望的是视区尺寸和设备尺寸是相同的，这样浏览器的内容将填满整个屏幕，但是这只是我们所想的，不是所有的都是这样的苹果设备就那么听话。
iPhone、iPod touch和iPad在计算宽度时不会考虑方向，而其他设备会。
不过乔布斯设计了一个新的<meta>标记
<meta name="viewport" content="width=device-width, initial-scale=1">
这告诉移动设备，将视区视为具有设备的物理宽度相同的宽度。而且，它还告诉iPhone、iPod touch和iPad在计算宽度时考虑方向。这样，您可以在媒体查询中安全地使用width，因为您知道它的用途与您所想的相同。
也得到了w3c的批准，而且其他移动设备也广泛采用了。而放心使用。
如何编写媒体查询
设置一个或多个条件的媒体查询
media=“screen and (min-width: 401px) and (max-width: 600px)"
媒体查询是布尔值：它们要么为true，要么为false。如果整条语句为true，那么将应用样式表。如果为false，将忽略样式表。其实这句话就是说 屏幕在401px-600px之间执行该样式表。
值得注意的是 and后边一定要加空格，样式表不执行别说我没告诉过你。
指定否定条件
media=“not screen and (monochrome)”
不能在单个条件前使用not。该关键字必须位于声明的开头，而且它会否定整个声明。所以，上面的示例会应用于除单色屏幕外的所有设备。
向早期浏览器隐藏媒体查询
媒体查询规范还提供了关键字only，它用于向早期浏览器隐藏媒体查询。类似于not，该关键字必须位于声明的开头。
media="only screen and (min-width: 401px) and (max-width: 600px)"
早起的浏览器会忽略only这样的媒体类型，所以他会将浏览器解释为
media="screen and (min-width: 401px) and (max-width: 600px)"
不幸的是，IE 6–8未能正确实现该规范。没有将样式应用到所有屏幕的设备，它将整个样式表一起忽略。
对处理早期的Internet Explorer版本 我们只需一份写一份不支持媒体查询的样式
使用Internet Explorer条件注释来向早期版本的IE提供一组特殊的规则
<!--[if lt IE 9 & !IEMobile]>
<link href="iestyles.css" rel="stylesheet" type="text/css">
<![endif]-->
@import和@media一起使用
@import url("phone.css") only screen and (max-width:400px);
@media only screen and (max-width:400px) {
#navbar { float: none; width: 400px; }
}
这样写 以后写响应式的网页，用媒体查询会方便。
评论