媒体查询需配合viewport meta标签才能生效，移动端优先使用min-width断点，推荐768px/1024px/1200px三档，禁用%、vh、vw单位，结合clamp()实现平滑响应式，断点依据应为内容可读性而非具体机型。
媒体查询本身不“自动适配”，它只在你定义的条件满足时才生效；漏掉 <meta name="viewport"> 或写错单位，@media 就根本不会触发。
viewport meta 标签必须加，且不能写错
没有它，移动端浏览器会用约 980px 的虚拟视口渲染页面，导致 max-width: 768px 这类断点完全不匹配。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是底线，缺一不可 -
width=device-width不是固定像素值，而是映射到设备的 CSS 像素宽度（比如 iPhone 14 的 viewport 宽度是 390px） - 避免
user-scalable=no或maximum-scale=1，会影响可访问性，WCAG 不推荐
断点用 min-width 向上扩展，别按手机型号硬写
主流做法是移动端优先（mobile-first）：先写基础样式（小屏），再用 @media (min-width: 768px) 等逐步增强。这样逻辑更清晰，维护成本更低。
- 典型断点建议：
768px（平板竖屏临界）、1024px（常见笔记本窄屏）、1200px（宽屏内容区上限） - 别用
375px、414px这类具体机型宽度做断点——它们只是参考，真正该看的是内容是否溢出、按钮是否太小、行高是否挤压 - 超过 4 个断点会让 CSS 维护变困难，多数项目 2–3 个足够
@media 条件里只能用 px、em、rem，不能用 %、vh、vw
媒体查询的条件判断基于静态视口尺寸，而 %、vh、vw 是运行时动态计算的单位，无法用于匹配逻辑。
现代商业数字化服务公司网站模板
下载
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@media (max-width: 50%)或@media (min-width: 50vw)—— 浏览器直接忽略 - 正确单位只有：
px（最常用）、em（基于当前字体大小）、rem（基于根元素字体大小） -
orientation: landscape在旧版 Android 和移动端 Safari 中支持不稳定，慎用作核心布局判断
仅靠 media queries 不够，得配合弹性单位
媒体查询适合做“档位切换”（比如从单列变三列），但字体、边距、内边距等细节需要平滑过渡，这时单靠断点切换会显得生硬。
- 用
clamp(16px, 4vw, 24px)替代纯@media控制字号，兼容性已覆盖 Chrome 88+/Safari 13.1+ -
rem比em更可控，因为不随父级字号嵌套放大 - 如果用 JS 动态改
document.documentElement.style.fontSize配合rem，会引入运行时依赖；纯 CSS 的clamp()更轻量
最容易被忽略的不是语法，而是断点背后的依据——它不该来自某个手机型号的分辨率，而应来自内容是否可读、是否可点、是否撑满或留白过多。写完每条 @media 规则后，真机调试比模拟器更可靠，尤其是 iOS Safari 对 orientation 和某些媒体特性的处理常有偏差。
