首页>前端教程>CSS教程

CSS3第十六课: Media Queries媒体查询——响应式布局的关键

其实在CSS2的规范就提出了@media的规则,就是根据不同的设备使用不同的css样式。遗憾的是很多设备媒介没有得到支持。

所以在CSS3中,关于媒体查询的含义发生了改变,不再是查看设备的类型,而是查看设备的功能。

媒体查询主要可以查看设备的功能如下:

  • 设备视口的宽度和高度

  • 设备本身的宽度和高度。

  • 横屏竖屏(比如手机,平板是横屏还是竖屏)

  • 解析度

因为IE9都支持media queries,所以利用媒体查询完成响应式设计得到了很好的应用。

一、语法结构

由媒体类型和表达式构成,可以有多个表达式,表达式可以得到真或假。媒体类型和表达式之间都要通过and来连接。

@media not|only mediatype and (expressions) {
  CSS-Code;
}

当媒体类型匹配且表达式都为真的时候,就会执行对应的css样式。

除了在页面内部直接使用上面的语法之外,还可以为不同的媒体类型指定不同的外部css样式表。

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

比如:

<link rel="stylesheet" type="text/css" href="b.css" media="screen  and (min-width: 768px) and (max-width: 979px)">

二、媒体类型

  • all   所有媒体类型设备

  • screen  用于屏幕,比如电脑屏幕、平板、智能手机等

  • print    用于打印设备

  • speech   用于“读取”页面内容的屏幕阅读器,比如为盲人设计的应用。

三、常用的表达式

@media screen and (min-width: 375px){ }

min-width: 480px ,表示当屏幕的宽度大于等于375px的时候,使用内部的样式。

@media screen and (max-width: 375px){ }

max-width: 480px,表示当屏幕的宽度小于等于375px的时候,使用内部的样式。

@media screen and (min-width: 480px) and (max-width:768px){ }

min-width: 480px and max-width: 768px,表示屏幕的宽度480px<=screenwidth<=768px。

@media screen and (max-device-width: 1024px) and (orientation: landscape){ }

ipad横屏,max-device-width指的是设备的最大宽度。

@media screen and (max-device-width: 768px) and (orientation: portrait) { }

ipad竖屏,可以查询设备的方向。

这里有很多关于媒体查询的断点和媒体类型设置,可以直接根据你的需要来用:

CSS3 Media Queries 片段

当然还有很多响应式框架,比如bootstrap就是很成熟的基于移动端响应式设置的框架。

四、其他注意事项

IE8以下的版本不支持媒体查询,可以使用css3-mediaqueries.js来兼容。

<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

需要在文档头部添加如下代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这段代码如果不写,那么浏览器会把网页按照pc端那样的全部显示,不会产生响应式的变化,文字变得很小很小。所以这段声明是让浏览器解析网页的宽度就是设备的宽度,而且不可以缩放。

最后,媒体查询是基于有一份完整的css文档之下所做的调整,所以要基于css自身的层叠关系,不要又在媒体查询那里把所有样式全部写一遍,只需要写出要覆盖原样式的新样式即可。

点赞


2
保存到:

相关文章

Top