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

前言

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

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

语法

媒体查询的起源

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

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

基本语法如下

@media mediatype {
/* CSS rules */
}

mediatype是指定的媒体类型：

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

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

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

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

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

此外CSS2中的@media效果还可以通过使用