css - 媒体查询(Media types)

方木头
68 阅读3分钟

媒体查询的作用

媒体查询 顾名思义就是用来匹配媒体的,通过媒体查询的各个属性来匹配到 符合条件的媒体,然后将媒体查询内对应的规则作用于匹配到的媒体.

媒体可以是 屏幕类型,如手机,电脑显示器,或者打印设备,如打印机.

媒体查询在前端的主要作用就是和CSS 属性结合,解决不同屏幕 样式适配的问题.

媒体查询的使用方法

在使用媒体查询时,你必须指定要使用的媒体类型. 媒体类型是可选的,并且会(隐式的)应用 all 类型,也就是说媒体查询的默认值 是 all 类型

常见的媒体类型的值

  • all:适用于所有设备.
  • print:适用于在打印预览模式下在屏幕上查看的分页材料和文档.
  • screen(常用):主要用于屏幕.
  • speech:主要用于语音合成器.

被废弃的媒体类型: CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty,tv,project,handled,braille,embossed,以及aural); 但是它们 在 Media Queries 4 中 已经被废弃,并且不应该被使用. aural 类型被替换为 具有相似效果的 speech.

媒体查询-媒体特性(即 媒体类型可以设置的属性值)

媒体类型 描述了 浏览器,输出设备,或是预览环境的具体特征.

  • 通常会将媒体特性描述为一个表达式.
  • 每条媒体特性表达式都必须用括号括起来.
特征意义是否支持最大最小值描述
宽度width长度支持渲染表面的宽度
高度 height长度支持渲染表面的高度
颜色color整数支持每个颜色分量的位数
设备比例 device-aspet-ratio整数/整数支持长宽比
设备宽度device-width长度支持输出设备的宽度
设备高度device-height长度支持输出设备的高度
方向 orientation"portrait" 或“landscape”不支持屏幕方向
分辨率 resolution分辨率(“dpi”,“dpcm”,“dppxx”)支持解析度

媒体查询-逻辑操作符

媒体查询的表达式最后会获得一个Boolean值,也就是(true) 或者(false)

  • 如果结果为真(true),那么就会生效;
  • 如果结果为假(false),那么就不会生效.

如果有多个条件,我们可以通过 逻辑操作符联合复杂的媒体查询:

  • and: and 操作符 用于将多个媒体查询规则组合成单条媒体查询
  • not: not 运算符 用于否定媒体查询,如果不满足这个条件则返回true,否则返回false.
  • only: only 运算符 仅在整个查询匹配时才应用于应用样式.
  • ,(逗号): 逗号用于将多个媒体查询合并为一个规则

比如如下的媒体查询,表示:屏幕宽度大于500,小于 700的时候,body 背景颜色为红色

@media screen and (min-width: 500px) and (max-width: 700px) {
    body {
        background-color:#f00;
    }
}

@media 表明这是一条媒体查询语句

“screen and (min-width: 500px) and (max-width: 700px)” 代表的是这条媒体查询要匹配的条件,它会返回两种结果,true或false.

  • 如果当前媒体符合这个条件,就会返回true,花括号{}中的样式就会作用于当前媒体.
  • 如果当前媒体不符合这个条件,就会返回false,样式就不会起作用

{} 中的内容就是 具体的 css样式.

媒体查询的作用

媒体查询的主要作用其实就是 可以通过设置不同的媒体查询来做 不同屏幕的css 样式适配(主要是移动端的适配). 当然仅仅依靠媒体查询来做移动端的还是不足够的,还需要了解css 中单位,像素以及屏幕的相关知识.

这些就下回分解了.

avatar
文章
阅读
粉丝