在家里组一个服务器做网站,新乡新手学做网站,杭州市网站推广,腾讯广告代理商https://blog.csdn.net/leaves_yu/article/details/79280389 Media Queries能在不同的条件下使用不同的样式#xff0c;使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中#xff0c;但Media Queries有其自己的使用规则。具体来说…https://blog.csdn.net/leaves_yu/article/details/79280389 Media Queries能在不同的条件下使用不同的样式使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。
media 媒体类型and 媒体特性{你的样式}
注意使用Media Queries必须要使用“media”开头然后指定媒体类型也可以称为设备类型随后是指定媒体特性也可以称之为设备特性。媒体特性的书写方式和样式的书写方式非常相似主要分为两个部分第一个部分指的是媒体特性第二部分为媒体特性所指定的值而且这两个部分之间使用冒号分隔。例如
(max-width: 480px)
从前面表中可以得知主要有十种媒体类型和13种媒体特性将其组合就类似于不同的CSS集合。
但与CSS属性不同的是媒体特性是通过min/max来表示大于等于或小于做为逻辑判断
而不是使用小于和大于这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。
1. 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性其意思是指媒体类型小于或等于指定的宽度时样式生效。如
media screen and (max-width:480px){.ads {display:none;}
}
上面表示的是当屏幕小于或等于480px时,页面中的广告区块.ads都将被隐藏。
2.最小宽度min-width
“min-width”与“max-width”相反指的是媒体类型大于或等于指定宽度时样式生效。
media screen and (min-width:900px){
.wrapper{width: 980px;}
}
上面表示的是当屏幕大于或等于900px时容器“.wrapper”的宽度为980px。
3.多个媒体特性使用
Media Queries可以使用关键词and将多个媒体特性结合在一起。也就是说一个Media Query中可以包含0到多个表达式表达式又可以包含0到多个关键字以及一种媒体类型。
当屏幕在600px~900px之间时body的背景色渲染为“#f5f5f5”如下所示。
media screen and (min-width:600px) and (max-width:900px){body {background-color:#f5f5f5;}
}
4.设备屏幕的输出宽度Device Width
在智能设备上例如iPhone、iPad等还可以根据屏幕设备的尺寸来设置相应的样式或者调用相应的样式文件。同样的对于屏幕设备同样可以使用“min/max”对应参数如“min-device-width”或者“max-device-width”。
link relstylesheet mediascreen and (max-device-width:480px) hrefiphone.css /
上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px比如说iPhone上的显示这里的“max-device-width”所指的是设备的实际分辨率也就是指可视面积分辨率。
5. not关键词
使用关键词“not”是用来排除某种制定的媒体类型也就是用来排除符合表达式的设备。换句话说not关键词表示对后面的表达式执行取反操作如
media not print and (max-width: 1200px){样式代码}
上面代码表示的是样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
6.only关键词
only用来指定某种特定的媒体类型可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有支持媒体特性的设备正常调用样式此时就当only不存在表示不支持媒体特性但又支持媒体类型的设备这样就会不读样式因为其先会读取only而不是screen另外不支持Media Queries的浏览器不论是否支持only样式都不会被采用。如
linkrelstylesheet mediaonly screen and (max-device-width:240px) hrefandroid240.css /
在Media Query中如果没有明确指定Media Type那么其默认为all如
linkrelstylesheet media(min-width:701px) and (max-width:900px) hrefmediu.css /
另外在样式中还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中指定方式如下所示。
linkrelstylesheet typetext/css hrefstyle.css mediahandheld and (max-width:480px), screen and (min-width:960px) /
上面代码中style.css样式被用在宽度小于或等于480px的手持设备上或者被用于屏幕宽度大于或等于960px的设备上。
到目前为止CSS3 Media Queries得到了众多浏览器支持除了IE6-8浏览器不支持之外在所有现代浏览器中都可以完美支持。还有一个与众不同的是Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀
