viewport标签缺失或错误导致@media失效，首屏内容无法优先呈现；应将关键样式写在CSS顶部、用min-width做增强、避免100vw抖动。
viewport 标签漏了，@media 就是废代码
移动端首屏关键内容无法优先呈现，八成是因为 HTML 里没写或写错了 <meta name="viewport" content="width=device-width, initial-scale=1">。没有它，浏览器默认用 980px 宽度渲染页面，@media (min-width: 768px) 永远不会触发——你写的断点再准也没用。
这个标签必须放在 <head> 最顶部，且不能写成 content="width=375" 或漏掉 initial-scale=1。真机调试时如果发现首屏布局“像桌面站一样宽”，第一反应就该查这个。
@media (min-width: ...) 必须从基础样式之后开始写
移动优先不是“写了媒体查询就行”，而是把首屏关键内容的样式直接写在 CSS 顶部，不依赖任何 @media。比如导航栏、主标题、首张图、核心按钮，都用默认样式确保在 320px 宽度下可读、可点、不溢出。
- 字体用
font-size: 16px起步，别等媒体查询才设 - 容器用
width: 100%+padding: 1rem，别一开始就设max-width: 1200px - 关键图片加
width: 100%; height: auto，防横屏拉伸变形 -
@media只用来做“增强”：比如平板横屏时让导航变横向，桌面端加侧边栏
别用 @media (max-width: ...) 控制首屏内容可见性
用 @media (max-width: 767px) 隐藏非关键模块（如右栏广告、次要筛选项），看似省事，实则埋雷：
立即学习“前端免费学习笔记（深入）”；
- 视口宽度可能落在 767.5px 这类边界值，导致首屏内容突然消失或错位
- 用户开启系统字体放大后，视口计算逻辑变化，
max-width规则容易失效 - 和
min-width规则混用时，层叠顺序难预测，关键内容可能被意外覆盖 - 更稳的做法是：默认显示所有首屏内容，用
@media (min-width: 768px)把非关键模块“移出去”或“收进抽屉”
真机上首屏抖动？检查 100vw 和滚动条宽度
iOS 和部分 Android 浏览器中，地址栏显示/隐藏会动态改变视口宽度，若你用 width: 100vw 做全宽容器，首屏就会“抽搐”。这不是媒体查询的问题，但直接影响首屏稳定性。
替换方案很直接：
- 用
width: 100%+max-width: 100%替代100vw - 关键区域（如 header、hero 图）避免依赖视口单位，改用父容器百分比或
rem - 如果必须用视口单位，加
overflow-x: hidden在body上防横向滚动
媒体查询本身不控制加载顺序，首屏关键内容是否“快”且“稳”，取决于你是否让它在最基础样式里就存在、是否避开了视口单位陷阱、以及有没有被 viewport 标签拦在门外。
