必须写<meta name="viewport" content="width=device-width, initial-scale=1.0">，它是移动端渲染强制开关，缺一不可；width=device-width使布局视口等于设备逻辑像素宽，initial-scale=1.0确保理想视口启用，禁用user-scalable=no以保障可访问性。
viewport meta 标签必须写对
移动端页面不缩放、不横向滚动，核心就靠这行 <meta name="viewport" >。错一个参数，整个自适应就失效。
-
width=device-width表示视口宽度等于设备物理宽度（不是分辨率），缺了它，iPhone 会按 980px 渲染 -
initial-scale=1.0必须显式写上，否则某些安卓浏览器可能默认放大 - 不要加
user-scalable=no—— 屏幕阅读障碍用户需要缩放，且部分地区合规要求禁止禁用缩放 - 完整写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS 中优先用 rem + 媒体查询而非像素固定值
写死 px 是响应式最大陷阱。字体、间距、容器宽高一旦用 px，在高 DPI 屏或缩放设置下会失真。
- 根字体大小用 JS 动态设：根据
document.documentElement.clientWidth计算，比如 375px 宽设为16px，750px 宽设为32px - 媒体查询断点别只写
max-width: 768px，要覆盖主流设备：(max-width: 480px)（小屏）、(min-width: 481px) and (max-width: 768px)（平板竖屏）、(min-width: 769px)（桌面） - 慎用
vmin/vmax：iOS Safari 早期版本支持差，且在横竖屏切换时可能抖动
HTML 结构要语义化且扁平，避免嵌套过深
层级太深会放大 rem 计算误差，也增加 CSS 选择器权重冲突风险，尤其在微信内置浏览器里容易触发渲染 bug。
- 主容器用
<main>，导航用<nav>，页脚用<footer>—— 语义标签自带默认 display 和 margin，比一堆<div class="wrap">更可控 - 避免三层以上嵌套的
<div>，比如<div><div><div><p>，改用 Flex 布局直接约束子元素 - 图片必须带
srcset和sizes：<img src="a.jpg" srcset="a-320w.jpg 320w, a-768w.jpg 768w" sizes="(max-width: 320px) 280px, 720px">
测试阶段必须真机连 Chrome DevTools 远程调试
模拟器跑不出真实问题。比如 iOS Safari 的 position: fixed 在键盘弹出时偏移、安卓 WebView 的 flex wrap 行高计算错误，只有真机+远程调试才能复现。
立即学习“前端免费学习笔记（深入）”；
- Chrome 地址栏输入
chrome://inspect，勾选 “Discover USB devices”，手机开启开发者模式并 USB 连接 - 重点看 Elements 面板里
computed栏的实际 width/height，不是你写的 CSS 值，而是最终生效值 - 遇到文字模糊，先检查是否用了非整数
rem（如1.25rem），某些 Android 系统 subpixel 渲染异常
