必须设置viewport meta标签，否则rem/vw/vh在移动端或高分屏下计算失准；推荐固定写法，并配合clamp()、vw/vh布局、minmax(12vw,1fr)等方案保障多屏适配。
viewport 设置必须加，否则 rem 或 vw/vh 会失效
移动端或混合分辨率大屏（比如 1920px 宽 + 4K 屏）下，不设 <meta name="viewport">，浏览器会默认按 980px 模拟桌面宽度渲染，导致 vw、rem 计算基准错乱，整个布局“看起来缩了一半”或者文字糊成一片。
实操建议：
- 固定写死：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 不要用
target-densitydpi（已废弃），也不要动态注入 viewport（部分安卓 WebView 不识别） - 如果用
rem方案，需搭配 JS 动态设置document.documentElement.style.fontSize，且该 JS 必须在内同步执行，不能 defer
容器尺寸用 vw/vh 而非百分比，避免嵌套计算失真
百分比宽度依赖父容器，大屏可视化常有多层嵌套（如 .screen > .grid > .panel > .chart），每层 100% 累积误差后，最终图表可能偏移几像素甚至换行。而 vw/vh 直接锚定视口，更可控。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 横向滚动条意外出现（实际内容没超宽，但某层百分比算出来 >100vw）
- 全屏切换后，
height: 100%的图表高度塌陷（父级没显式设高）
推荐写法：
.screen {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.panel {
width: 25vw; /* 固定占视口 25% 宽 */
height: 30vh;
}字体和边框用 rem 或 clamp()，别只靠 vw
纯 vw 做字体（如 font-size: 2.4vw）在小屏（如 768px iPad）下会小到看不清；纯 rem 在高分屏上又可能过大。需要兜底+弹性。
实操建议：
- 优先用
clamp()：例如font-size: clamp(12px, 1.2vw, 16px)，定义最小、理想、最大三值 - 边框线（
border）慎用px，改用0.05vw或1px+transform: scale(1.5)模拟高清线 - 图标字体（如 iconfont）统一用
em单位，使其随父级 font-size 缩放
Flex/Grid 配合 minmax() 控制组件最小可读尺寸
大屏拉伸时，卡片或图表区域可能被过度拉宽，内部文字间距炸开、折行错乱。单纯设 flex: 1 或 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))) 不够——300px 在 4K 屏上只是 1/12 宽度，仍可能过小。
关键点：
- 把“最小可读宽度”换成视口单位：
minmax(12vw, 1fr)，确保在 1920px 屏上至少 230px，在 3840px 屏上至少 460px - 对图表容器额外加
min-width: 300px（绝对值兜底），防止极端窄屏下内容挤压 - 避免在
grid中混用%和fr，会导致 track size 计算冲突
复杂点在于“多设备同屏预览”——比如开发时用 1920×1080，但上线后客户投到 5120×1440 拼接屏，此时 vw 基准变了，clamp() 的上限可能不够，得靠运行时检测 window.devicePixelRatio 和 screen.width 做微调。这个逻辑容易漏，一漏就是整屏文字糊掉。
