5x8小时服务热线:131 4102 7650(同微信)
您当前的位置:首页 > 网站常识 - 网站建设

介绍媒体查询的几种常见用法

来源:北京网站建设公司 标签:CSS3媒体查询media
分享到:
下面介绍几种媒体查询的常见用法,希望对你有帮助:

媒体类型判断显示屏是否是纵向的语法:
media="screen and (orientation:portrait)"
如果设备是纵向的显示屏,则会加载该样式表。

如果在媒体查询前面加了not,则会颠倒该查询的逻辑。比如:
media="not screen and (orientation:portrait)"
如果设备不是纵向的显示屏,则会加载该样式表。

媒体查询也可以多个表达式组合在一起,比如:
media="screen and (orientation:portrait) and (min-width:800px)"
如果是纵向的显示屏,而且最小宽度是800px,则加载该样式表。

媒体查下还可以是一个列表。列表中的任意一个查询为真,则加载样式表,全部查询都不为真,则不加载。如:
media="screen and (orientation:portrait) and (min-width:800px), projection"
projection是投影仪的意思,在表达式中,projection后面没有任何表达式,意味着只要是projection就满足条件。上面的例子,样式会应用于所有的投影仪。

注意:媒体查询之间使用逗号分隔。

以上的写法都是应用在link标签中的media属性来实现不同的媒体查询加载不同的css样式表文件的。除了以上方法外,也可以通过在css样式表中来设置不同的媒体查询样式,这两种方法都可以使用。
比如:
@media screen and (max-device-width:400px){
    body{background:#000;}
}
上面的样式是在屏幕宽度小于等于400px的设备上,页面的背景会是黑色。

下面介绍一种方法,也可以按条件引入其他样式表。即@import方法。这个方法由于会增加http请求,影响加载速度,所以请谨慎使用。例如:
@import url("phone.css") screen and (max-width:360px);
当视口宽度不大于360px的显示屏设备时,加载phone.css样式表。
备注:本篇文章由加网编辑原创内容,转载请注明出处:转自加网

相关网站常识

更多