CSS（七）媒体查询

本文最后更新于：8 个月前

本文介绍CSS媒体查询的语法，使用示例和应用场景

CSS（七）媒体查询

一、语法

1、语法格式

媒体查询语法

1
2
3
@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

  • 媒体类型，包括：all（缺省默认值）、print、screen、speech

  • 媒体表达式

    可以使用多种逻辑操作符合并多条媒体查询语句。媒体查询语句不区分大小写。

  • CSS规则

2、媒体类型

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

3、媒体特性

名称 简介
height 视窗（viewport）的高度，特指特定的数值，实际较少使用
width 视窗（viewport）的宽度，包括纵向滚动条的宽度
max-width/min-width 最大/最小宽度，用来表示范围，常用
max-height/min-height 最大/最小高度
prefers-color-scheme 探测用户倾向于选择亮色还是暗色的配色方案
orientation 视窗（viewport）的旋转方向，有两种取值：
portrait，viewport 处于纵向
landscape，viewport 处于横向
resolution (en-US)[1] 输出设备的像素密度（分辨率），单位dpi或dppx

[1] 在 js 中通过 window.devicePixelRatio 查看 设备像素比 devicePixelRatio

4、逻辑运算符

运算符 含义
and 逻辑与
, 相当于 or 的作用，逻辑或
not 逻辑非，用于整个查询表达式，而不是单个表达式[1]
only 主要用于早期浏览器[2]

[1] not用于反转整个表达式，而不是单个表达式，示例如下：

1
2
3
4
5
6
7
8
9
/*示例一*/
@media not (orientation: portrait) and (min-height: 680px) { ... }
/*等价于*/
@media not ((orientation: portrait)and(min-height: 680px)) { ... }

/*示例二*/
@media not screen and (color), print and (color) { ... }
/*等价于*/
@media not (screen and (color)),   print and (color) { ... }

[2] 当不使用only时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用only运算符，则还必须指定「媒体类型」

5、示例

1
2
3
4
5
6
7
@media screen, print { ... }
@media (max-width: 1250px) { ... }
@media (min-width: 30em) and (orientation: landscape) { ... }
@media only (min-width: 30em) and (orientation: landscape) { ... }		  /*保证老版本的兼容性，对新版本没影响*/
@media screen and (min-width: 30em) and (orientation: landscape) { ... }	/*必须同时满足所有条件*/
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
@media (min-height: 680px), screen and (orientation: portrait) { ... }		/*用户设备的最小高度为 680px，或为纵向模式的屏幕设备*/

更详细的细节请浏览：使用媒体查询 - CSS（层叠样式表） | MDN (mozilla.org)

二、应用场景

为不同的设备（PC、手机、平板等）设置断点，应用不同的样式设计

典型的端点取值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 超小型设备（电话，600px 及以下） width <= 600px */
@media only screen and (max-width: 600px) {...} 

/* 小型设备（纵向平板电脑和大型手机，600 像素及以上） width >= 600px */
@media only screen and (min-width: 600px) {...} 

/* 中型设备（横向平板电脑，768 像素及以上） width >= 768px */
@media only screen and (min-width: 768px) {...} 

/* 大型设备（笔记本电脑/台式机，992px 及以上） */
@media only screen and (min-width: 992px) {...} 

/* 超大型设备（大型笔记本电脑和台式机，1200px 及以上） */
@media only screen and (min-width: 1200px) {...}

一般在区分PC和移动端的时候，会给定一个范围，如下

1
2
@media only screen and (min-width: 600px) and (max-width: 767px) {...} 	/*表示移动端设备*/
@media only screen and (min-width: 768px) {...} 					  /*表示PC端设备*/

如果第一条查询表达式不加max-width特性的话，当设备宽度超过768时，会同时满足两个表示式，也即同时应用两种样式，显然这并不是我们所期望出现的！

一般在使用「媒体查询」时，需要使用meta标签，禁用页面缩放

1
2
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 让视口（网页的可视区域）的宽度等于设备的宽度，并禁止用户对页面的缩放 -->

三、3种使用方式

3.1、CSS文件中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
/* style.css */
@media (max-width: 320px) {
    /*0~320*/
    body {
        background: pink;
    }
}
@media (min-width: 321px) and (max-width: 375px) {
    /*321~768*/
    body {
        background: red;
    }
}

3.2、结合@import使用

1
2
3
<head>
    @import 'index01.css' screen and (max-width:1024px) and (min-width:720px)
</head>

3.3、结合link标签使用

1
2
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
CSS
CSS（七）媒体查询
http://timegogo.top/2022/11/04/CSS/CSS（七）媒体查询/
作者
丘智聪
发布于
2022年11月4日
更新于
2023年7月16日
许可协议