必须添加viewport meta标签，否则响应式失效；推荐rem+动态根字体适配；关键样式禁用px，改用rem或clamp()；图标等矢量元素可保留px；真机测试权衡缩放与固定值。
HTML 样式代码本身不会自动跨设备统一，class 和 style 属性写得再规范，不配合响应式策略和基础约束，手机上照样会文字溢出、按钮错位、间距崩坏。
用 viewport meta 是硬性前提
没有它，移动端浏览器会以桌面视口（通常是 980px 左右）渲染页面，缩放后字体发虚、点击区域变小、媒体查询失效——所有样式努力都白搭。
必须在 中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
漏掉这行，后续所有 CSS 调整都像在流沙上盖楼。某些旧安卓 WebView 还需要加 maximum-scale=1.0 防止双击缩放干扰布局。
立即学习“前端免费学习笔记（深入）”；
rem + html font-size 动态适配比 em 更可控
em 依赖父级字体大小，嵌套深了容易失控；rem 始终基于 html 根元素，更适合做全局缩放锚点。
常见做法是 JS 根据屏幕宽度动态设 html.style.fontSize，比如：
远程控制 Android 设备，支持截图、自动化操作手机 App 等功能。本应用使用 uiautomator2 作为底层框架，通过 ADB 连接设备，用户无需 Root（1）查看手机屏幕；（2）自动化操作手机 App；（3）远程安装/卸载应用……
document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px'; // 以 375px 宽为基准，1rem = 16px
然后所有间距、字号、圆角都用 rem 单位：padding: 1rem、font-size: 1.125rem。注意：iOS Safari 对小数 rem 支持稳定，但部分低端 Android 浏览器对 0.875rem 这类值可能四舍五入异常，建议最小步进设为 0.125rem（即 2px）。
避免直接写死 px 的关键位置
以下地方一旦用 px，跨设备就大概率出问题：
-
font-size：尤其正文、按钮文字，应优先用rem或clamp() -
width/max-width：容器宽度别写1200px，改用100%或min(100%, 1200px) -
border-radius：大圆角在小屏上会吃掉太多空间，用0.5rem比8px更协调 -
line-height：别用24px，用无单位值如1.5，让它随字号自然缩放
例外：图标字体（如 iconfont）或 SVG 内联尺寸可保留 px，因其本质是矢量，不受缩放影响。
clamp() 替代媒体查询做平滑字号过渡
传统方案靠一堆 @media (max-width: ...) 切断式调整，维护成本高，且中间尺寸体验生硬。用 clamp() 一行就能搞定渐进缩放：
font-size: clamp(1rem, 4vw, 1.25rem);
含义：最小 1rem，最大 1.25rem，中间按视口宽度的 4% 线性插值。iPhone SE（375px）≈ 1.05rem，iPad Pro（1024px）≈ 1.25rem，过渡自然。注意：IE 完全不支持，如需兼容，得 fallback 到 font-size: 1.125rem 并配合 JS 补丁。
真正难的不是写出能跑的样式，而是判断哪些值该“锁死”、哪些该“流动”——比如按钮高度可以随 rem 缩放，但内部图标尺寸最好固定，否则太小看不清，太大又失衡。这种权衡没法靠工具自动完成，得在真机上反复点、拖、缩放才能校准。
