码迷,mamicode.com
首页 > 其他好文 > 详细

@media

时间:2014-08-14 01:03:17      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   io   ar   cti   

构:

@media  all and( min-width:600px){

样式表:即

.mainbox{ background:#fff000;}

}

all可指定的值:

bubuko.com,布布扣

样式表:

bubuko.com,布布扣

bubuko.com,布布扣

使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式,譬如以下语句指定了当窗口宽度小于640px时所使用的样式:
@media screen and (max-width:639px){样式代码}
可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中,指定方式类型如下所示:
@media handled and (min-width:360px),screen and (min-width:480px){样式代码}
可以在表达式中加上not关键字或only关键字,not关键字表示对后面的表达式执行取反操作,书写方法如下所示:

@media not handled and (color) {样式代码}
//样式代码将被使用在所有非彩色设备中
@media all and (not color)
only关键字的作用是,让那些不支持Media Queries但是能够读取Media Type的设备的浏览器将表达式中的样式隐藏起来。例如,对于如下的语句来说:
@media only screen and (color){样式代码}
对于支持Media Queries的设备来说,将能够正确的应用样式,就仿佛only不存在一样。对于不支持Media Queries便能够读取Media Type的设备(譬如IE8只支持"@media screen")来说,由于先读取到的是only而不是screen,将忽略这个样式。
对于不支持Media Queries的浏览来说,无论是否有only,都将忽略这个样式。
CSS3中的Media Queries模块中也支持对外部样式表的引用,使用方法类似如下表示:
@import url(color.css) screen and (min-width:1000px)

@media,布布扣,bubuko.com

@media

标签:style   blog   http   color   使用   io   ar   cti   

原文地址:http://www.cnblogs.com/mrjie/p/3911295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!