直接用vw做移动端适配可行但需约束：100vw因计入滚动条宽度导致横向溢出，应优先用100%；iOS Safari中100vh不随地址栏变化更新，需JS动态注入--vh变量；字体和间距推荐vmin或clamp(14px,4vmin,20px)；Flex/Grid中需设min-height:0防calc失效。
直接用 vw 做移动端适配是可行的，但不加约束会出问题——比如横屏时文字炸开、iOS Safari 里 100vh 失效、全宽容器多出滚动条。关键不是“能不能用”，而是“怎么用才稳”。
为什么 100vw 会导致横向滚动条
浏览器计算 100vw 时，把垂直滚动条宽度（通常 16px）也算进视口宽度了，但实际渲染区域不包含它。结果就是：元素撑到了“含滚动条”的 100%，视觉上溢出。
- 典型现象：
width: 100vw的 banner 或 header 在 iOS Safari / 部分 Android 浏览器中触发水平滚动 - 安全替代：内容区域优先用
width: 100%；全屏遮罩、背景图等无交互区域才用100vw - 如果必须用
100vw，可加overflow-x: hidden到body，但这是掩盖而非修复
iOS Safari 中 100vh 不实时更新怎么办
地址栏收起/展开时，vh 值不会重算，导致页面“跳动”或底部留白。这不是 bug，是 Safari 的渲染策略。
- 解决方案：用 JS 动态注入 CSS 变量，配合
calc() - 在
<head>中加：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`); - CSS 中写：
height: calc(100 * var(--vh)); - 记得监听
resize和orientationchange事件重新设置
字体和间距用 vw 还是 vmin
vw 单独用于字体，在横屏下极易失控（例如 font-size: 5vw 在 1920×1080 横屏下 ≈ 96px）。vmin 才是更合理的选择。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
font-size: 4vmin表示取视口宽高中较小者的 4%，竖屏按宽度、横屏按高度，视觉尺寸更一致 - 搭配
clamp()更稳妥：font-size: clamp(14px, 4vmin, 20px)，防小屏过小、大屏过大 - 间距（
padding、margin）同样建议用vmin，避免横屏时按钮被撑得过大 - IE 完全不支持
vmin，需用@supports (font-size: 1vmin)包裹并 fallback 到rem或媒体查询
vw/vh 在 Flex/Grid 布局中容易失效的点
calc(100vh - 60px) 在 Flex 容器里常不生效，不是写错了，而是被默认的 min-height: auto 截断了。
- 必须显式设
min-height: 0到 flex item 上，否则它会拒绝收缩 - Grid 容器若未设明确高度，
grid-template-rows: 60px 1fr 50vh中的50vh可能被忽略，优先用1fr分配剩余空间 -
box-sizing: border-box是前提，否则padding和border会让calc()计算失准 - 父容器若有
padding，要一并减掉：height: calc(100vh - 60px - 1rem)
真正难的不是写出 100vw，而是判断什么时候不该用它；不是记住换算公式，而是理解 vmin 和 clamp() 如何协同防御极端屏幕比例。这些细节不报错，但上线后会在真机上悄悄破坏体验。
