移动端CSS不生效主因是viewport未设置或媒体查询错误；需在head中添加viewport标签，并用min-width移动优先写法写媒体查询，再通过真机调试验证。
移动端CSS样式不生效，大概率是viewport未正确设置或媒体查询写法/匹配条件有误。这两个环节缺一不可，下面分点说清楚。
viewport标签必须加在head里
没有它，浏览器会以桌面宽度（如980px）渲染页面，媒体查询的max-width: 768px自然不会触发。
正确写法（放在中）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
立即学习“前端免费学习笔记（深入）”；
关键参数说明：
- width=device-width：让页面宽度等于设备屏幕宽度（不是固定值，是动态适配）
- initial-scale=1.0：初始缩放为1，避免双击放大或自动缩放
- user-scalable=no（可选）：禁用用户缩放，提升体验一致性
媒体查询要写对断点和语法
常见错误包括单位漏写、括号不全、断点值不合理。
正确示例（推荐移动优先写法）：
/* 基础样式（默认给所有设备） */<br>body { font-size: 16px; }<br><br>/* 平板及以上 */<br>@media (min-width: 768px) {<br> body { font-size: 18px; }<br>}<br><br>/* 桌面端 */<br>@media (min-width: 1024px) {<br> body { font-size: 20px; }<br>}
注意点：
- 必须用
px、em等单位，不能只写数字（如@media (max-width: 768)❌） - 推荐用
min-width而非max-width，更利于维护（移动优先） - 断点值建议参考主流设备：iPhone竖屏≈375px，iPad≈768px，桌面≥1024px
检查CSS加载顺序和选择器权重
即使媒体查询生效，也可能被更高权重的样式覆盖。
- 确保媒体查询CSS在基础样式之后引入（内联style、link顺序、@import位置）
- 用浏览器开发者工具（F12 → Elements → Styles）看是否命中了对应规则，以及有没有被划掉（表示被覆盖）
- 避免滥用
!important，优先通过调整选择器层级来解决冲突
真机调试比模拟器更可靠
Chrome DevTools 的响应式模式只是模拟，部分行为（如缩放、touch事件、DPR）和真机不同。
- 用USB连接安卓手机，在Chrome中开启“远程调试”查看真实渲染效果
- iOS可用Safari + Mac配合：Safari → 开发 → [你的设备名] → 页面列表
- 重点观察viewport是否生效（比如页面是否横向滚动、字体是否过小/过大）
基本上就这些。先确认viewport标签存在且位置正确，再核对媒体查询语法和断点逻辑，最后用真机验证。不复杂但容易忽略细节。
