您的位置:首页> 前端教程> CSS3教程
文章导航

CSS @media 媒体查询

2019-4-19 21:12| 作者: admin| 查看: 1411| 评论: 0|来自: 蚂蚁部落

由于媒体尺寸的多样性,为了能够使同一套代码适配多种尺寸媒体,于是产生了响应式布局。

响应式布局,就是页面能够根据当前媒体的不同应用不同的布局方式,以此达到最佳效果。

布局方式通常由CSS控制,媒体查询可以判断当前媒体类型,从而应用不同的CSS代码。

一.媒体查询历史:

很多朋友认为媒体查询是CSS3新增,事实并非如此。

媒体查询在CSS3之前早已存在,比较粗放一些,仅用来区分媒体的类型。

看如下简单代码实例:

[HTML] 纯文本查看 复制代码
<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" />

上述代码分析如下:

(1).link元素的media属性用来规定上述CSS代码应用的媒体类型。

(2).screen表示对应CSS文件应用于显示设备。

(3).all表示对应CSS文件应用于所有媒体设备.

(4).print表示对应CSS文件应用于打印机。

(5).即便当前媒体不符合要求,也会下载对应的CSS文件,只是不应用。

media属性也可以用于<style>元素,规定当前css代码应用的媒体类型,本文就不再演示。

CSS3之后,媒体查询功能得到了增强,不但可以查询媒体类型,而且还可以查询媒体的相关属性。

比如可以根据当前浏览器视口的尺寸的大小,来应用不同的CSS代码或者CSS文件。

二.媒体类型与媒体属性:

上文已经介绍,CSS3媒体查询只能区分媒体类型,CSS3得到了进一步加强,可以区分媒体的属性。

下面罗列一下当前媒体查询常见的媒体类型与媒体属性:

1.媒体类型:

(1).screen:显示屏幕,比如电脑、手机或者pad屏幕。

(2).tty:电传打字机已经等宽字符网格类的设备。

(3).tv:电视等类型的设备。

(4).projection:投影仪等设备。

(5).handheld:一些手持设备。

(6).print:打印机。

(7).braille:盲人专用的一些设备。

(8).aural:语音合成器。

(9).all:表示适用于所有设备。

2.媒体属性:

媒体属性是针对媒体类型的一种细化,比如同是screen显示器设备,但是规格会有所不同。

比如显示区域的尺寸不同,再比如显示器中浏览器视口可以调整到不同的尺寸。

主要媒体属性列举如下:

(1).宽度属性:width | min-width | max-width。

(2).高度属性:height | min-height | max-height。

(3).设备宽度:device-width | min-device-width | max-device-width。

(4).设备高度:device-height | min-device-height | max-device-height。

(5).视口宽高比:aspect-ratio | min-aspect-ratio | max-aspect-ratio。

(6).设备宽高比:device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio。

(7).颜色属性:color | min-color | max-color。

(8).颜色索引属性:color-index | min-color-index | max-color-index。

(9).黑白属性:monochrome | min-monochrome | max-monochrome。

(10).方向属性:orientation。

(11).分辨率属性:resolution | min-resolution | max-resolution。

(12).网格属性:grid。

上面当前主要的媒体属性,有些属性实在是不太常用,甚至一辈子都不会用到。

所以后面的代码实例只会简单演示一些常见的媒体属性,如果对其他属性感兴趣可以自行测试。

三.语法介绍:

媒体查询有两张应用场所,一种用在<link>与<style>元素之上,一种是CSS代码内部。

下面抛开媒体查询具体的语法不谈,首先演示一下使用场所。

[HTML] 纯文本查看 复制代码
<style media="screen and (max-width:1000px)" >
div{
  color:red;
}
</style>

通过media属性规定媒体查询的具体内容,对于<link>标签也是同样的道理。

上述代码规定必须是显示器屏幕且视口尺寸小于等于1000px时候,能够将div字体颜色设置为红色。

[CSS] 纯文本查看 复制代码
@media screen and (max-width:1000px){
  div{
    color:red;
  }
}

上述代码应用于CSS代码内部,功能与前面的完全一样,以@media作为媒体插件的语法标记。

具体语法分析如下:

当媒体查询为true时,就会应用对应的CSS样式。

无论是通过media还是@media规定媒体查询,语法都一致,且媒体属性一定要用小括号包裹。

媒体查询中有如果敢逻辑操作符,在构建多条件查询的时候非常有用,属于语法的一部分。

但是考虑到比较重要,下面单独拿出来进行一下详细介绍。

四.逻辑操作符:

媒体查询中有四个逻辑操作符,分别是and、not、or和only,下面分别介绍一下它们的作用。

1.and操作符:

与JavaScript中的逻辑与操作符一个道理,比如两侧的条件都满足时,才会返回true。

代码片段如下:

[CSS] 纯文本查看 复制代码
@media screen and (min-width:800px) and (max-width:1200px) {
  div{
    color:red;
  }
}

上述代码规定当前媒体必须满足如下条件,才会将div颜色设置为红色:

(1).媒体类型必须是screen,也就是必须是显示器,比如电脑或者手机登。

(2).视口的尺寸必须大于等于800像素,小于等于1200像素,比如调整浏览器视口到此尺寸。

特别说明:如果操作符不是not或者only,那么媒体类型是可选的,如果省略,那么默认值是all。

所以上述代码可以修改如下:

[CSS] 纯文本查看 复制代码
@media (min-width:800px) and (max-width:1200px) {
  div{
    color:red;
  }
}

将媒体类型screen省略掉,功能没有什么变化。

2.not操作符:

此操作符用于对一个媒体查询语句进行取反操作,类似于JavaScript中的逻辑非运算符。

代码片段如下:

[CSS] 纯文本查看 复制代码
@media not screen and (min-width:800px) and (max-width:1200px) {
  div{
    color:red;
  }
}

对上述代码分析如下:

(1).not是对整个媒体查询语句的一个取反,而不是对某一个媒体属性取反。

(2).所以上述代码等同于@media not( screen and (min-width:800px) and (max-width:1200px))。

3.or操作符:

与JavaScript逻辑或操作符相同道理,只要两侧满足一条,那么整个媒体查询语句返回值为true。

代码片段如下:

[CSS] 纯文本查看 复制代码
@media (max-width:500px) , (orientation: landscape) {
  div{
    color:red;
  }
}

特别说明:or操作符用逗号表示,否则会报错。

只要满足视口宽度小于等于500像素或者横屏的任意一条,那么div字体颜色就会被设置为红色。

4.only操作符:

此操作符可能未来就会被淘汰了,它是为了兼容低版本的浏览器而存在的。

随着软硬件的发展进步,它可能就逐步失去存在的意义,下面简单介绍一下。

看如下代码片段:

[HTML] 纯文本查看 复制代码
media="screen and (max-width:1000px)"{...}

较为老式的浏览器可能不支持媒体属性相关的媒体查询,上面的代码并没有打算给这些浏览器使用。

但是在这些较为老式的浏览器中,上述代码实质上会被解析为如下代码:

[HTML] 纯文本查看 复制代码运行代码
media="screen"{...}

因为较为老式的浏览器支持media="screen",所以上述CSS代码会老式浏览器中生效。

下面通过only操作符对上述代码进行一下修改:

[HTML] 纯文本查看 复制代码
media="only screen and (max-width:1000px)"{...}

上述代码在较为老式的浏览器中被解析为如下代码:

[HTML] 纯文本查看 复制代码
media="only "{...}

但是并没有一种叫做"only"的媒体类型,所以CSS代码就不会被应用。

五.媒体属性:

媒体属性比较多,下面只介绍一些比较常用的几种。

且大多数支持min-或者max-前缀,比如与width属性关联的属性还有min-width和max-width。

为了节省篇幅和时间,只以width属性为例子进行介绍,其他属性也是如此。

(1).内容显示区域宽高比:

aspect-ratio属性描述了内容输出区域的宽高比,属性值是以斜杠(/)分隔的整数。

代码片段如下:

[CSS] 纯文本查看 复制代码
@media (aspect-ratio: 1/2) {
  div{
    color:red;
  }   
}

(2).设备宽高比:

和内容区域宽高比比较相似,属性值格式相同。

关于它们之间的区别,以电脑端为例子,显示器屏幕宽高比就是设备宽高比。

但是浏览器客户区的宽高比就是内容内容宽高比,是不是很容易理解了。

[CSS] 纯文本查看 复制代码
@media (device-aspect-ratio:16/9) {
  div{
    color:red;
  }
}

(3).内容高度与内容宽度:

height与width描述了媒体内容输出区域的高度和宽度,比如浏览器客户区的高度和宽度。

[CSS] 纯文本查看 复制代码
@media (height:800px) {
  div{
    color:red;
  }      
}

宽度是同样的道理,就不再举例子了。

(4).设备高度与设备宽度:

device-height与device-width描述了设备的高度和宽度,比如显示器屏幕的高度和宽度。

[CSS] 纯文本查看 复制代码
@media (device-width: 1200px) {
  div{
    color:red;
  }     
}

(5).方向:

orientation规定了设备是处于横屏状态还是竖屏状态。

具有两个属性值,landscape表示横屏,portrait表示竖屏。

[CSS] 纯文本查看 复制代码
@media (orientation: portrait) {
  div{
    color:red;
  }    
}

前面已经介绍了CSS 媒体查询的相关内容,媒体查询还有一些其他相关知识,可以参阅如下文章:

(1).媒体查询 rem 失效一章节。

(2).JavaScript matchMedia()一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS clip-path下一篇:CSS opacity 透明度

最新评论

返回顶部