重拾CSS，前端样式精读-媒体查询

前言

本文收录于CSS系列文章中，欢迎阅读指正

说到媒体查询，大家首先想到的可能是有关响应式的知识点，除此之外，它还可以用于条件加载资源，字体大小，图像和视频的优化，用户界面调整等等方面，学好媒体查询可以为页面增添条件样式，应对不同的设备类型。它是基于CSS2中的@media规则扩展而来，在CSS3中增加了特性查询的能力，使得它更加灵活和强大。

语法

媒体查询的起源

媒体查询发展到现在已经有五个版本，其中1-3版都被css2及更早版本支持，当前正处于第五版（截止目前第四版文档最后编辑时间是24年2月）

早期版本的媒体查询规则也允许你根据媒体类型应用不同的样式，与CSS3相比，CSS2中的@media规则较为简单，主要关注于媒体类型的区分，并没有引入复杂的表达式和特性查询。

基本语法如下

css 复制代码

@media mediatype {
/* CSS rules */
}

mediatype是指定的媒体类型：

all - 适用于所有设备
aural - 专为语音和音频合成器设计（目前已弃用）
braille - 用于盲文触觉反馈设备（目前已弃用）
handheld - 适合小型的手持设备（目前已弃用）
print - 目标为打印文档或打印预览
projection - 适用于演示，如投影仪（目前已弃用）
screen - 主要指色彩电脑屏幕
tty - 用于使用固定间距的字母网格显示的媒介，如电传打字机和终端（目前已弃用）
tv - 适用于电视类型的设备（目前已弃用）

css 复制代码

@media print {
    .box {
        border: 1px solid #000;
    }
}

@media screen {
    .box {
        border-radius: 50%;
    }
}

使用@import语法同样可以限制引入对应查询条件的标签

css 复制代码

@import url("fineprint.css") print;
@import "common.css" screen, projection;

此外CSS2中的@media效果还可以通过使用<style>,<link>,<source>等标签中的media属性来实现

html 复制代码

<link rel="stylesheet" media="print" href="./print.css">
<link rel="stylesheet" media="screen" href="./screen.css">

上述代码中当打印状态下就会引用print.css文件，在普通浏览器中会引入screen.css的内容

CSS3的媒体查询

回到现代CSS中的媒体查询语法，它不仅扩充了媒体类型还在原有类型的基础上增加了媒体的特点以及一些组合语法，如：如视口宽度、设备朝向等

基本语法

css 复制代码

@media not|only mediatype and (expressions) {
  /* CSS规则 */
}

媒体特征

媒体特征用于描述设备的各种属性，例如屏幕尺寸、方向、分辨率等，常用的媒体特征如下：

width/height:视口宽度和高度。
min-width/max-width:最小和最大视口宽度。
min-height/max-height:最小和最大视口高度。
orientation:设备方向，可以是landscape(横向)或portrait(纵向)。
resolution:输出设备的分辨率。
aspect-ratio:视口的宽高比。
color:可用的颜色数。
color-index:设备的色彩索引表中的颜色数。
monochrome:单色帧缓冲中每像素的位数。

更多媒体特征参照@media - CSS：层叠样式表 | MDN

来看看它的用法：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@media</title>
</head>
<style>
    .box,
    .box2 {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }

    @media (min-width: 900px) {
        .box {
            background: lightcoral;
        }
    }

    @media (hover: hover) {
        .box2:hover {
            background: yellow;
        }
    }
</style>

<body>
    <div class="box">box</div>
    <div class="box2">box2</div>
</body>

</html>

上述代码表示视窗大于900时box会改变颜色，当当前设备支持hover功能时，box2的hover生效

逻辑运算

与CSS选择器类似，媒体查询同样支持条件组合的逻辑运算，在媒体特征，媒体类型之间使用not、and、only和or（四版本之前使用的是逗号 , ）关键字可以达到组合查询的效果。

not

用于排除某些媒体或条件，同js的!

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>not</title>
</head>
<style>
    .box {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background: lightcoral;
    }

    @media not print {
        .box {
            background: navy;
            color: white;
        }
    }

    @media not (min-width: 900px) {
        .box {
            background: lightblue;
        }
    }
</style>

<body>
    <div class="box">box</div>
</body>

</html>

上述代码非打印页面背景切换navy和非宽度大于（小于等于）900px背景为亮蓝。当二者都满足则遵循css样式规则，后面的属性覆盖前面的属性，看看效果：

and

用于组合多个条件的逻辑操作符，同js的&&

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>and</title>
</head>
<style>
    .box {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background: lightcoral;
    }

    @media screen and (min-width: 800px) and (max-width: 1024px) {

        /* 视口宽度在800到1024像素之间的屏幕上应用这些样式 */
        .box {
            background-color: lightblue;
        }
    }

    @media screen and (min-width: 600px) and (max-width: 800px) {

        /* 视口宽度在600px到800px之间的屏幕上应用这些样式 */
        .box {
            background-color: lightgreen;
        }
    }
</style>

<body>
    <div class="box">box</div>
</body>

</html>

当窗口宽度在600-800显示绿色，800-1024显示蓝色，其余显示红色

or

表示可以选择多个媒体查询中的任意一个来应用样式，在媒体查询四版本之前一般使用逗号（,）表示该效果，类似与js中的||，思考下面的代码

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>or</title>
</head>
<style>
    /* 其余600-800显示默认 */
    .box {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background: lightcoral;
    }

    @media (max-width: 600px) or (min-width: 800px) {

        /* 小于600或大于800生效 */
        .box {
            background-color: lightblue;
        }
    }

    @media (max-width: 400px),
    (min-width: 1000px) {

        /* 小于400或大于1000生效 */
        .box {
            background-color: lightgreen;
        }
    }
</style>

<body>
    <div class="box">box</div>
</body>

</html>

only

only关键字在CSS媒体查询中的作用是用来防止旧版浏览器误解和应用不支持的媒体查询，比如上面说到的css2中只支持媒体类型的写法，当我们要兼容旧浏览器又想使新版写法生效时可以使用only，思考下面一段代码

css 复制代码

@media only screen and (min-width: 800px) and (max-width: 1024px)

当代码处于老版本浏览器时，and后面的条件都会失效变成以下代码

css 复制代码

@media screen

总结

媒体查询允许开发者为不同的媒体类型和条件编写特定的样式规则。通过使用媒体查询，可以创建响应式网页布局，确保网页可以适配多种不同尺寸和分辨率的设备，在实际应用中，媒体查询使得CSS样式可以根据不同的浏览环境动态地适应变化，从而提供跨设备的无缝用户体验。

感谢你看到这里，以上就是文章全部内容了，如果觉得文章不错的话，还请三连鼓励一下，你的支持就是我创作的最大动力，谢谢！

知识点参考

使用媒体查询 - CSS：层叠样式表 | MDN

媒体查询入门指南 - 学习 Web 开发 | MDN

Media Queries Level 4

Media Queries Level 3

语法参考

@media - CSS：层叠样式表 | MDN

重拾CSS，前端样式精读-媒体查询

前言

语法

媒体查询的起源

CSS3的媒体查询

基本语法

媒体特征

逻辑运算

not

and

or

only

​​​​​​​​​​​​​​总结

相关代码

知识点参考

语法参考

总结