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