一. 媒体查询的历史:
很多朋友认为媒体查询是CSS3新增,事实并非如此。媒体查询在CSS3之前早已存在,只是比较粗放一些,仅用来区分媒体的类型。
看如下简单代码实例:
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
上述代码分析如下:
- link元素的media属性用来规定上述CSS代码应用的媒体类型。
- screen表示对应CSS文件应用于显示设备。
- all表示对应CSS文件应用于所有媒体设备.
- print表示对应CSS文件应用于打印机。
- 即便当前媒体不符合要求,也会下载对应的CSS文件,只是不应用。
media属性也可以用于<style>元素,规定当前css代码应用的媒体类型,本文就不再演示。
CSS3之后,媒体查询功能得到了增强,不但可以查询媒体类型
,而且还可以查询媒体的相关属性
。
比如可以根据当前浏览器视口的尺寸的大小,来应用不同的CSS代码或者CSS文件。
二.媒体类型与媒体属性:
上文已经介绍,CSS2媒体查询只能区分媒体类型,CSS3得到了进一步加强,可以区分媒体的属性。
CSS3 中Media Queries的使用方法如下:
@media 媒体类型 and (媒体属性) {你的样式}
注意:使用Media Queries必须要使用@media
开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体属性(也可以称之为设备属性)。
媒体属性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体属性
,第二部分为媒体属性所指定的值
,而且这两个部分之间使用冒号
分隔。
下面罗列一下当前媒体查询常见的媒体类型与媒体属性:
主要的媒体类型有:
-
screen:显示屏幕,比如电脑、手机或者pad屏幕。
-
tty:电传打字机已经等宽字符网格类的设备。
-
tv:电视等类型的设备。
-
projection:投影仪等设备。
-
handheld:一些手持设备。
-
print:打印机。
-
braille:盲人专用的一些设备。
-
aural:语音合成器。
-
all:表示适用于所有设备。
主要媒体属性有:
-
宽度属性:width | min-width | max-width。
-
高度属性:height | min-height | max-height。
-
设备宽度:device-width | min-device-width | max-device-width。
-
设备高度:device-height | min-device-height | max-device-height。
-
视口宽高比:aspect-ratio | min-aspect-ratio | max-aspect-ratio。
-
设备宽高比:device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio。
-
颜色属性:color | min-color | max-color。
-
颜色索引属性:color-index | min-color-index | max-color-index。
-
黑白属性:monochrome | min-monochrome | max-monochrome。
-
方向属性:orientation。
-
分辨率属性:resolution | min-resolution | max-resolution。
-
网格属性:grid。
但与CSS属性不同的是,媒体属性是通过min/max
来表示大于等于或小于做为逻辑判断
,
而不是使用小于(<)和大于(>)这样的符号来判断。
三. 具体使用(两种场所)
媒体查询有两种应用场所,一种用在<link>与<style>元素之上
,一种是CSS代码内部
。
下面抛开媒体查询具体的语法不谈,首先演示一下使用场所。
1. <style>或者<link>标签上(这种主要针对媒体类型做区分)
<style media="screen and (max-width:1000px)" > div{
color:red; } </style>
通过media属性规定媒体查询的具体内容,对于<link>
标签也是同样的道理。
上述代码规定必须是显示器屏幕且视口尺寸小于等于1000px时候,能够将div字体颜色设置为红色。
2. 通过@media
来使用
@media screen and (max-width:1000px){
div{
color:red;
}
}
上述代码应用于CSS代码内部,功能与前面的完全一样,以@media作为媒体插件的语法标记。
具体语法分析如下:
当媒体查询为true时,就会应用对应的CSS样式。
无论是通过media还是@media规定媒体查询,语法都一致,且媒体属性一定要用小括号包裹。
媒体查询中有如果有逻辑操作符,在构建多条件查询的时候非常有用,属于语法的一部分。
但是考虑到比较重要,下面单独拿出来进行一下详细介绍。
四.逻辑操作符:
1. and操作符:
与JavaScript中的逻辑与操作符一个道理,比如两侧的条件都满足时,才会返回true。
代码片段如下:
@media screen and (min-width:800px) and (max-width:1200px) {
div{
color:red;
}
}
上述代码规定当前媒体必须满足如下条件,才会将div颜色设置为红色:
- 媒体类型必须是screen,也就是必须是显示器,比如电脑或者手机登。
- 视口的尺寸必须大于等于800像素,小于等于1200像素,比如调整浏览器视口到此尺寸。
注意:
如果操作符不是not或者only,那么媒体类型是可选的,如果省略,那么默认值是screen。
所以上述代码可以修改如下:
@media (min-width:800px) and (max-width:1200px) {
div{
color:red;
}
}
上面效果和带screen一致。
2. not操作符:
此操作符用于对一个媒体查询语句进行取反操作,类似于JavaScript中的逻辑非运算符。
代码片段如下:
@media not screen and (min-width:800px) and (max-width:1200px) {
div{
color:red;
}
}
对上述代码分析如下:
- not是对整个媒体查询语句的一个取反,而不是对某一个媒体属性取反。
- 所以上述代码等同于@media not( screen and (min-width:800px) and (max-width:1200px))。
3.or操作符:
与JavaScript逻辑或操作符相同道理,只要两侧满足一条,那么整个媒体查询语句返回值为true。
代码片段如下:
@media (max-width:500px) , (orientation: landscape) {
div{
color:red;
}
}
特别说明
:or操作符用逗号表示,否则会报错。
只要满足视口宽度小于等于500像素或者横屏的任意一条,那么div字体颜色就会被设置为红色。
4.only操作符:
此操作符可能未来就会被淘汰了,它是为了兼容低版本的浏览器而存在的。
随着软硬件的发展进步,它可能就逐步失去存在的意义,下面简单介绍一下。
五.媒体属性:
媒体属性比较多,下面只介绍一些比较常用的几种。
且大多数支持min-或者max-前缀,比如与width属性关联的属性还有min-width和max-width。
为了节省篇幅和时间,只以width属性为例子进行介绍,其他属性也是如此。
1. 最大宽度max-width
max-width
是媒体属性中最常用的一个属性,其意思是指媒体类型小于或等于指定的宽度时,样式生效
。如:
@media screen and (max-width:480px){
.ads {
display:none;
}
}
上面表示的是:当屏幕小于或等于480px时,页面中的广告区块(.ads)都将被隐藏。
2.最小宽度min-width
min-width
与max-width
相反,指的是媒体类型大于或等于指定宽度时,样式生效。
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 rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的“max-device-width”所指的是设备的实际分辨率,也就是指可视面积分辨率。
5. 内容显示区域宽高比:
aspect-ratio属性描述了内容输出区域的宽高比,属性值是以斜杠(/)分隔的整数。
代码片段如下:
@media (aspect-ratio: 1/2) {
div{
color:red;
}
}
6. 设备宽高比:
和内容区域宽高比比较相似,属性值格式相同。
关于它们之间的区别,以电脑端为例子,显示器屏幕宽高比就是设备宽高比。
但是浏览器客户区的宽高比就是内容内容宽高比,是不是很容易理解了。
@media (device-aspect-ratio:16/9) {
div{
color:red;
}
}
7. 内容高度与内容宽度:
height与width描述了媒体内容输出区域的高度和宽度,比如浏览器客户区的高度和宽度。
@media (height:800px) {
div{
color:red;
}
}
宽度是同样的道理,就不再举例子了。
8. 设备高度与设备宽度:
device-height与device-width描述了设备的高度和宽度,比如显示器屏幕的高度和宽度。
@media (device-width: 1200px) {
div{
color:red;
}
}
9. 方向:
orientation
规定了设备是处于横屏状态还是竖屏状态。
具有两个属性值,landscape
表示横屏,portrait
表示竖屏。
@media (orientation: portrait) {
div{
color:red;
}
}
参考链接1 :https://www.jianshu.com/p/927790abdd80
参考链接2:http://www.softwhy.com/article-10120-1.html
今天的文章媒体查询使用详解分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/33773.html