media query 不支持 width >= 768px 写法，必须用 min-width: 768px；width 是精确匹配特性，仅接受具体数值，无法用于响应式范围判断，主流框架均采用移动优先的 min-width 断点策略。
Media Query 不支持 width >= 768px 这种写法
直接写 @media (width >= 768px) 会完全失效——CSS 媒体查询语法不接受 JavaScript 风格的比较运算符。浏览器会忽略整个规则块，连报错都不会有，容易误以为是逻辑问题而非语法错误。
真正有效的范围表达必须拆成两个独立条件，或改用更现代、语义更清晰的 min-width / max-width。
正确写法只有 min-width 和 max-width
CSS 媒体特性中没有“>=”、“
-
@media (min-width: 768px)表示“宽度 ≥ 768px”，这是最常用、最推荐的写法 -
@media (max-width: 1023px)表示“宽度 ≤ 1023px” - 两者组合：
@media (min-width: 768px) and (max-width: 1023px)才等价于“768px ≤ width ≤ 1023px” - 注意：不要写成
(width >= 768px)或(width: >=768px)，均无效
为什么不用 width 特性做范围判断
width 是一个“精确匹配”媒体特性，只接受具体数值（如 width: 768px），不支持比较。它匹配的是视口**当前精确宽度**，几乎无法用于响应式布局：
- 用户缩放、设备像素比、滚动条宽度都会导致
width值浮动，极难稳定命中 -
@media (width: 768px)只在视口恰好为 768px 时生效，错过即失效 - 所有主流响应式框架（Bootstrap、Tailwind）都基于
min-width实现断点，因为它具有“向上兼容”特性（≥ 某值后持续生效）
移动端优先下，min-width 是默认选择
现代响应式开发约定俗成使用移动优先策略，基础样式写在默认层，大屏增强用 min-width 向上覆盖：
/* 默认：手机样式 */
.container { padding: 1rem; }
<p>/<em> 平板及以上 </em>/
@media (min-width: 768px) {
.container { padding: 2rem; max-width: 720px; }
}</p><p>/<em> 桌面端 </em>/
@media (min-width: 992px) {
.container { max-width: 960px; }
}
</p>
这种写法简洁、可预测、易维护。强行用 width + 运算符不仅无效，还会掩盖你对媒体查询本质的理解偏差——它不是条件表达式引擎，而是特性检测机制。
真正容易被忽略的是：媒体查询生效与否，取决于**视口宽度（viewport width）**，而不是设备宽度或 CSS 像素，且受 <meta name="viewport"> 控制。没设 viewport，min-width: 768px 在 iOS 上可能永远不触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
