【笔记】CSS的媒体查询

发表于 更新于 阅读次数：

前言

CSS的媒体查询
媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口
可以根据设备类型或特定的特性来修改页面

媒体查询的使用方式

  • 只有浏览器宽度大于等于768px时，才加载媒体查询的css文件

配合@import使用媒体查询

1
@import url("") (min-width: 768px);

配合link标签使用媒体查询

1
<link rel="stylesheet" href="" media="(min-width: 768px)">

使用@media定义媒体查询

1
2
3
@media (min-width: 768px) {
  ...
}

媒体查询的媒体类型

全部类型（缺省值）

1
@media {}
1
@media all {}

适用于屏幕

1
@media screen {}

适用于打印机

1
@media print {}

适用于语音合成器

1
@media speech {}

媒体查询的媒体特性

  • 媒体特性可以通过表达式来描述，表达式必须使用()进行包裹

宽高

宽度

1
@media (width: 768px) {}
1
@media (min-width: 768px) {}
1
@media (max-width: 768px) {}

高度

1
@media (height: 768px) {}
1
@media (min-height: 768px) {}
1
@media (max-height: 768px) {}

设备宽高

设备宽度

设备高度

颜色

1
@media () {}

设备比例

设备方向

  • portrait、landscape

设备分辨率（像素比）

  • 单位：dpi、dpcm、dppx

逻辑运算符

  • 只有布尔表达式的条件为真时才会执行

满足条件

  • 仅在完全满足条件时才执行
1
@media only (width: 768px) {}

不满足条件

  • 仅在完全不满足条件时才执行
1
@media not (min-width: 768px) {}

同时满足多个条件

1
@media (min-width: 768px) and (max-width: 1024px) {}

多个规则合并

  • 将多个规则用,隔开，合并为一个规则
1
@media (max-width: 768px), (max-width: 1024px) {}

完成