max-width断点适用于小屏优先场景，匹配视口宽度≤指定值时生效，如768px常用于移动设备；min-width则适合桌面优先，配合使用可精准控制区间；二者在媒体查询中指视口宽度，在元素样式中限制自身宽度范围。
max-width断点匹配的是“小屏优先”场景
当你写 @media screen and (max-width: 768px)，意思是“视口宽度 ≤ 768px 时生效”，它天然适合移动设备起步的渐进增强逻辑。常见于隐藏导航栏、折叠侧边栏、切换为单列布局等操作。
- 错误写法：
@media screen and (max-width: 1200px)用来给桌面端加样式——这会导致所有 ≤1200px 的设备（包括平板、小屏笔记本）都命中，容易误伤 - 正确思路：
max-width断点应尽量窄，比如480px、768px、992px，对应明确的小屏临界值 - 注意：它不关心设备类型，只看当前浏览器窗口宽度，所以缩放浏览器或拖动窗口时会动态触发
min-width断点更适合“桌面优先”和区间控制
@media screen and (min-width: 992px) 表示“视口宽度 ≥ 992px 时生效”，这是桌面端适配的主流起点。单独用它能避免小屏干扰，配合 max-width 还能精准圈定区间。
- 典型区间写法：
@media screen and (min-width: 768px) and (max-width: 991px)—— 专用于平板横屏，不会漏掉也不会重叠 - 别把
min-width当成“最小设备宽度”，它和min-device-width不同，后者读取物理屏幕尺寸，已基本被弃用 - 如果多个
min-width断点连续定义（如 768px、992px、1200px），后声明的规则会覆盖前声明的，前提是选择器权重相同
max-width 和 min-width 同时设在同一个元素上会怎样？
当你在元素自身写 max-width: 600px; min-width: 300px;，不是媒体查询，而是直接限制该元素的宽度弹性范围。这时候：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 元素实际宽度由内容、父容器、
width属性共同决定，但最终不会突破这两个边界 - 如果
min-width>max-width（比如min-width: 800px; max-width: 600px;），浏览器会以min-width为准，因为它的约束更强 - 它们的计算优先级高于
width，哪怕你写了width: 1000px !important，只要超出范围，照样被截断
为什么你写的断点没生效？检查这三点
断点失效往往不是语法错，而是环境或逻辑问题：
立即学习“前端免费学习笔记（深入）”；
- 忘了加
<meta name="viewport" content="width=device-width, initial-scale=1">—— 没它，移动端的max-width媒体查询基本失效 - 断点值写反了：比如用
min-width: 480px去适配手机，结果只有大屏才触发；或者区间里min-width和max-width数值颠倒 - CSS 加载顺序导致覆盖：后加载的样式表里相同的媒体查询会覆盖前面的，尤其在引入多个 CSS 文件时容易忽略
min-width / max-width 在媒体查询里是“视口宽度”，而在元素样式里是“自身宽度限制”——两者语义完全不同，但名字一样，容易套用错上下文。 
