媒体查询 - 技术栈

你想了解媒体查询（Media Queries）的基本用法，这是 CSS 中实现响应式布局的核心技术，能让网页根据不同设备（屏幕尺寸、设备类型、横竖屏等）加载不同的样式规则。

一、媒体查询的核心语法

媒体查询的基本结构分为三部分：媒体类型 + 媒体特性 + 要应用的样式，格式如下：

复制代码

/* 基础语法 */
@media [媒体类型] and [媒体特性] {
  /* 满足条件时生效的CSS样式 */
  选择器 {
    属性: 值;
  }
}

1. 核心组成部分拆解

媒体类型（可选） ：指定样式应用的设备类型，常用值：
- screen：电脑屏幕、平板、手机等（最常用）
- print：打印机或打印预览模式
- all：所有设备（默认值，可省略）
媒体特性（必选） ：判断设备 / 视口的特征（需用括号包裹），常用特性：
- width/min-width/max-width：视口宽度（最常用）
- height/min-height/max-height：视口高度
- orientation：横竖屏（portrait竖屏 / landscape横屏）
- aspect-ratio：视口宽高比
逻辑运算符（可选） ：组合多个条件，常用：
- and：同时满足多个条件
- ,（逗号）：满足任意一个条件（等同于or）
- not：取反（仅对整个查询生效）

二、常用基础用法示例

1. 根据屏幕宽度适配（最常用）

复制代码

/* 默认样式：所有屏幕生效 */
body {
  font-size: 16px;
  padding: 10px;
}

/* 视口宽度 ≥ 768px（平板/电脑）时生效 */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
  .container {
    width: 700px;
    margin: 0 auto;
  }
}

/* 视口宽度 ≥ 1200px（大屏电脑）时生效 */
@media screen and (min-width: 1200px) {
  .container {
    width: 1100px;
  }
}

/* 视口宽度 ≤ 480px（小屏手机）时生效 */
@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
    padding: 5px;
  }
}

2. 检测横竖屏（补充你之前关注的场景）

复制代码

/* 竖屏（宽≤高） */
@media screen and (orientation: portrait) {
  .box {
    background: #4CAF50; /* 绿色 */
    width: 80%;
    height: 200px;
  }
}

/* 横屏（宽>高） */
@media screen and (orientation: landscape) {
  .box {
    background: #2196F3; /* 蓝色 */
    width: 90%;
    height: 150px;
  }
}

3. 组合多个条件

复制代码

/* 视口宽度≥768px 且 横屏 时生效 */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .content {
    display: flex;
    justify-content: space-between;
  }
}

/* 小屏手机（≤480px） 或 打印模式 时生效 */
@media screen and (max-width: 480px), print {
  .sidebar {
    display: none; /* 隐藏侧边栏 */
  }
}

4. 引入外部样式文件（适合复杂项目）

除了在 CSS 中写媒体查询，也可以直接为不同设备引入单独的样式文件：

复制代码

<!-- 默认样式 -->
<link rel="stylesheet" href="style.css">
<!-- 屏幕宽度≥768px时加载平板样式 -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px)">
<!-- 打印时加载打印样式 -->
<link rel="stylesheet" href="print.css" media="print">

三、使用注意事项

视口设置 ：移动端使用媒体查询前，必须在 HTML 头部添加视口元标签，否则样式会适配错误：
复制代码
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
顺序问题 ：CSS 遵循 "层叠原则"，更具体 / 更晚写的媒体查询会覆盖前面的，建议按「从小到大」或「从大到小」的宽度顺序编写。
单位选择 ：适配时优先用%、rem、vw/vh等相对单位，避免固定px导致适配失效。

总结

媒体查询核心语法是 @media 媒体类型 and 媒体特性 { 样式 }，screen + 宽度 / 横竖屏是最常用组合；
min-width/max-width 用于按屏幕宽度适配，orientation 用于检测横竖屏；
移动端使用时必须配置视口标签，且注意样式的层叠顺序。

可以的，CSS 媒体查询专门提供了 orientation 属性来检测设备的横竖屏状态，能在切换时实时触发样式变化。

核心用法：

复制代码

/* 竖屏（默认） */
@media screen and (orientation: portrait) {
  body {
    background-color: #f0f8ff;
  }
}

/* 横屏 */
@media screen and (orientation: portrait) {
  body {
    background-color: #ffe4e1;
  }
}

关键注意点：

orientation 基于视口的宽高比 判断，portrait 是宽 ≤ 高，landscape 是宽＞高，和设备物理方向无关。
移动端切换横竖屏时，浏览器会自动重新计算媒体查询，无需手动刷新。
可结合 width/height 等属性做更精准适配，比如限定横屏时的最小宽度。