直接用vw/vh会导致宽高缩放比例不一致而变形，因二者独立计算；应锁定设计稿宽高比，用calc()+min()动态计算统一缩放系数，或通过JS设置根字体配合rem实现等比缩放。
为什么直接用 vw 和 vh 做大屏会变形
设计稿通常是 1920×1080（16:9），但真实屏幕可能是 3840×2160、2560×1440，甚至拼接屏如 5760×2160（3×1 拼接，宽高比 21:9）。只靠 vw 控制宽度、vh 控制高度，会导致「宽高缩放比例不一致」——比如把 1920px 宽按 100vw 拉满，1080px 高却没按相同比例拉满，结果图表被横向拉宽或纵向压扁。
常见现象：echarts 图表文字模糊、坐标轴错位；div 容器内文字换行异常；圆角按钮变成椭圆。
- 根本原因：浏览器把
100vw当作视口宽度，100vh当作视口高度，二者独立计算，不保证等比 - 解决思路：必须锁定「设计稿宽高比」，让缩放基于一个统一的参考尺寸（如 1920×1080），再按最小缩放因子适配
- 推荐做法：用
calc()+min()函数动态算出缩放系数，而不是直接绑定vw/vh
transform: scale() 的实际坑点和绕过方案
很多人直接对 body 或根容器加 transform: scale(0.8)，看似简单，但马上遇到三个硬伤：
- 鼠标事件坐标偏移：缩放后 DOM 元素视觉位置变了，但
clientX/clientY还是原始坐标，导致click、hover错位（尤其echartstooltip 不跟手） - 字体/边框像素级模糊：Chrome 对 sub-pixel 缩放渲染不友好，小字号文字发虚，1px 边框变 0.8px 后抗锯齿加重
- 滚动条意外出现：缩放后内容实际尺寸超出视口，触发
overflow: auto，破坏全屏体验
绕过方法不是禁用 scale，而是把它限定在「纯展示层」：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 只对包裹所有业务模块的最外层容器（如
.screen-wrapper）应用transform: scale() - 把这个容器设为
position: fixed; top: 0; left: 0; width: 100%; height: 100%;，避免影响文档流 - 所有内部交互元素（按钮、图表容器）保持原始尺寸，靠 CSS Grid/Flex 布局自身弹性适应缩放后的空间
用 CSS Grid 实现「骨架稳定」的分栏布局
大屏不是“响应式网页”，它要的是「固定比例下的弹性填充」。Grid 的 fr 单位 + 显式 grid-template-rows/columns 是目前最可控的方式。
例如一个标准 16:9 大屏三栏布局（左 20% / 中 60% / 右 20%）：
`.screen-container {
display: grid;
grid-template-rows: 80px 1fr 120px; /* 头部固定高、主体自适应、底部固定高 */
grid-template-columns: 20% 60% 20%;
height: 100vh;
width: 100vw;
}
<p>.header { grid-row: 1; grid-column: 1 / -1; }
.main-center { grid-row: 2; grid-column: 2; }
.footer { grid-row: 3; grid-column: 1 / -1; }`- 关键点：
grid-template-rows里混合使用固定值（80px）和弹性值（1fr），避免全部用%导致嵌套偏差 - 不要用
repeat(3, 1fr)—— 那会让头部也被拉伸，破坏标题可读性 - 如果需兼容拼接屏（如 21:9），只需改一行：
grid-template-columns: 15% 70% 15%;，无需 JS 干预
真正可靠的自适应入口：用 JS 动态设置根字体和缩放基准
纯 CSS 方案在极端宽高比下仍会留白或溢出。最稳的做法是用 JS 计算一次缩放比，然后注入到 CSS 变量中，后续全部用 rem 或 em 推导。
核心逻辑（放在 <script> 中）：
const designWidth = 1920;
const designHeight = 1080;
const scale = Math.min(
window.innerWidth / designWidth,
window.innerHeight / designHeight
);
document.documentElement.style.fontSize = `${
(scale * 100).toFixed(2)
}px`;- 这样
1rem就等于设计稿中100px的缩放后像素值，所有rem单位自动等比缩放 - 配合
@media做兜底：当屏幕过小时（如笔记本），强制最小缩放比为0.6，防止文字小到不可读 - 必须监听
resize，但加防抖（setTimeout延迟 100ms），否则频繁触发影响性能
缩放本身不是难点，难的是缩放后所有依赖像素精度的地方——图表坐标、动画帧率、字体渲染——都会被牵动。别指望一套代码通吃所有屏，得提前约定设计稿基准、明确哪些模块允许模糊、哪些必须保真。
