HTML/CSS中媒体查询的max-width与min-width有何区别？

核心区别 #

• min-width：「下限触发」规则——当视口宽度大于或等于设定数值时，该媒体查询内的CSS样式生效。简单说就是屏幕尺寸够大时启用这套样式，适合先写移动端基础样式，再逐步给更大屏幕做适配（移动端优先的适配思路）。
• max-width：「上限触发」规则——当视口宽度小于或等于设定数值时，对应的CSS样式生效。也就是屏幕尺寸够小时启用这套样式，适合先写桌面端基础样式，再给更小屏幕做适配（桌面优先的适配思路）。

结合示例理解 #

min-width 适配示例（移动端往上适配）

@media (min-width:480px)  { /* 屏幕≥480px时生效：智能手机横屏、安卓手机等 */ }
@media (min-width:600px)  { /* 屏幕≥600px时生效：竖屏平板、竖屏iPad等 */ }
@media (min-width:801px)  { /* 屏幕≥801px时生效：横屏平板、低分辨率台式机等 */ }
@media (min-width:1025px) { /* 屏幕≥1025px时生效：大尺寸平板、笔记本电脑等 */ }
@media (min-width:1281px) { /* 屏幕≥1281px时生效：高分辨率台式机等 */ }

这种写法从最小屏幕的基础样式开始，屏幕越大会叠加或覆盖更小屏幕的样式。比如屏幕宽度为1000px时，会同时触发min-width:480px、min-width:600px、min-width:801px这三个媒体查询的样式（样式冲突时，后面的规则会覆盖前面的）。

max-width 适配示例（桌面端往下适配）

@media (max-width:320px)  { /* 屏幕≤320px时生效：竖屏iPhone、小屏安卓手机等 */ }
@media (max-width:480px)  { /* 屏幕≤480px时生效：智能手机横屏、安卓手机等 */ }
@media (max-width:600px)  { /* 屏幕≤600px时生效：竖屏平板、电子阅读器等 */ }
@media (max-width:801px)  { /* 屏幕≤801px时生效：横屏平板、低分辨率笔记本等 */ }
@media (max-width:1025px) { /* 屏幕≤1025px时生效：大尺寸平板、笔记本电脑等 */ }
@media (max-width:1281px) { /* 屏幕≤1281px时生效：高分辨率笔记本等 */ }

这种写法从最大屏幕的基础样式出发，屏幕越小会触发对应的适配样式。比如屏幕宽度为500px时，会触发max-width:600px、max-width:801px、max-width:1025px、max-width:1281px这些媒体查询的样式（样式冲突时，后面的规则会覆盖前面的）。

内容的提问来源于stack exchange，提问作者kuldeep