重学 CSS – 媒体查询

发布于 2024/09/15

本文全面讲解了CSS媒体查询的语法和应用。文章涵盖了媒体类型、媒体特性、逻辑操作符等核心概念,并详细说明了媒体查询在样式表中的编写位置和顺序。此外,文章还提供了响应式设计中常用的断点设定,为开发者实现跨设备兼容的网页设计提供了实用指南。

媒体查询语法详解

媒体查询

媒体类型：描述设备的类别

all: 适用于所有设备
print: 适用于在打印预览模式
screen: 主要用于屏幕
speech: 主要用于语音合成器

媒体特性：描述了 user agent、输出设备、浏览器环境的具体特征

width: viewport 的宽度
height: viewport 的高度
aspect-ratio: viewport 的宽高比
orientation: viewport 的旋转方向

逻辑操作符：用于联合构造复杂的媒体查询

and: 用于将多个媒体查询规则组合成单条媒体查询
not: 用于否定媒体查询
only: 用于旧版浏览器识别媒体查询
逗号: 用于将多个规则合并为一个（类似 or）

link 标签方式：通过 link 标签的 media 属性设置媒体查询类型和媒体特征

媒体查询编写的位置及顺序

添加到样式表的底部，对 CSS 进行优先级覆盖

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}

@media (min-width: 500px) {
  .box {
    background-color: pink;
  }
}
</style>

移动端 -> PC 端：min-width 从小到大

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}

@media (min-width: 500px) {
  .box {
    background-color: pink;
  }
}

@media (min-width: 600px) {
  .box {
    background-color: pink;
  }
}
</style>

PC 端 -> 移动端: max-width 从大到小

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}

@media (max-width: 600px) {
  .box {
    background-color: pink;
  }
}

@media (max-width: 500px) {
  .box {
    background-color: black;
  }
}
</style>

响应式断点设定

Extra small < 576px
Small >= 576px (sm)
Medium >= 768px (md)
Large >= 992px (lg)
X-Large >= 1200px (xl)
XX-Large >= 1400px (xxl)