使用@media规则配合min-width/max-width可实现响应式样式切换，需合理设置断点、遵循移动优先顺序、避免冲突，并必须添加viewport标签。
直接用 @media 规则配合 min-width 或 max-width 就能按屏幕宽度切换样式，关键在于断点设置合理、书写顺序不冲突、记得加 viewport 标签。
基础写法和语法结构
@media 规则必须以 @media 开头，后面跟媒体类型（常用 screen）和括号内的媒体特性。最常用的是视口宽度判断：
-
@media screen and (min-width: 768px) { ... }：视口宽度 ≥ 768px 时生效 -
@media screen and (max-width: 479px) { ... }：视口宽度 ≤ 479px 时生效 -
@media screen and (min-width: 768px) and (max-width: 1199px) { ... }：限定在平板区间
推荐的断点划分方式
主流做法是“移动优先”，先写小屏默认样式，再用 min-width 逐级增强。常见断点参考：
- ≤ 479px：手机竖屏（默认样式可不写媒体查询）
- ≥ 480px：小屏手机横屏或大屏手机
- ≥ 768px：平板设备
- ≥ 992px：小桌面
- ≥ 1200px：大桌面
这样写逻辑清晰，避免 max-width 嵌套混乱，也符合 CSS 层叠优先级习惯。
必须配合 viewport 元标签
没有这行，媒体查询在移动端基本失效：
它告诉浏览器：按设备真实宽度渲染，不要自动缩放。漏掉这句，iPhone 上可能始终按 980px 宽度解析，导致 @media 判定完全错位。
实际调整样式的例子
比如让一个容器在不同宽度下自适应宽度：
- 默认（小屏）：
.container { width: 100%; padding: 10px; } - 平板：
@media screen and (min-width: 768px) { .container { width: 750px; margin: 0 auto; } } - 桌面：
@media screen and (min-width: 1200px) { .container { width: 1200px; } }
背景色、字体大小、Flex 排列方式等都可以同样处理，无需 JS 参与。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
