媒体查询
在用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; }
}
这样写 以后写响应式的网页,用媒体查询会方便。
评论