全屏视觉区块应优先用100dvh，兼容旧版时用min-height:100vh+JS动态设置--vh变量；文字用clamp(16px,4vmin,24px)或calc(1.5rem+2vw)，禁用vh设字体/行高；布局用vw/vh配合max-width、aspect-ratio及vmin约束极端比例，避开100vw含滚动条等陷阱。
用 vh 和 vw 构建全屏视觉区块，核心是让元素尺寸直接锚定视口，但必须避开常见陷阱——比如 iOS Safari 地址栏动态变化导致的跳动、滚动条侵占空间、小屏字体过小等问题。关键不在“设 100vh”，而在“怎么设得稳”。
全屏容器：优先用 dvh，次选 min-height + JS 补偿
现代浏览器（Chrome 105+、iOS Safari 16.4+）支持 dvh（dynamic viewport height），它会随地址栏收起/展开实时更新高度，比 100vh 更可靠：
-
height: 100dvh;—— 直接用于 splash 页、登录弹窗、轮播封面等需严格撑满可视区域的模块 - 若需兼容旧版 Safari，改用：
min-height: 100vh; height: 100%;，再配合 JS 动态写入真实高度：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
然后 CSS 中写：height: calc(var(--vh, 1vh) * 100); - 避免给
<html>或<body>设置height: 100vh，会破坏文档流，影响滚动和子元素继承
文字排版：不用纯 vw，用 clamp() 或 vmin
单写 font-size: 4vw 在 iPhone SE 竖屏下仅约 15px，iPad Pro 横屏却达 82px，完全失控。应控制上下限：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
font-size: clamp(16px, 4vmin, 24px);—— 最小 16px 防糊眼，最大 24px 防溢出，中间用vmin（取宽高较小值）保证横竖屏视觉一致 - 标题可稍激进：
font-size: calc(1.5rem + 2vw);，以 rem 为基底，vw 为增量，收敛性更好 - 禁用
vh做字体或行高：line-height: 1.4才合理；calc(1rem + 1vh)在 Safari 中会随地址栏跳动
布局与间距：vw/vh 控宽高，配合 vmin/max-width 约束极端比例
大屏数据看板或营销落地页常用全屏分栏，此时需兼顾缩放与可读性：
立即学习“前端免费学习笔记（深入）”；
- 宽度用
vw，高度用vh，但加约束：max-width: 1440px;防超宽屏拉伸变形 - 内边距、间隙统一用
vw或vh：padding: 2vh 3vw;、gap: 1.5vw; - 图标/按钮等小元素推荐
vmin：width: 8vmin; height: 8vmin;，确保在窄高屏（如折叠屏竖向）下不被压扁 - 保持宽高比用
aspect-ratio: 16/9;，比单纯设width: 70vw; height: 39.375vw;更健壮
避坑要点：这些操作会破坏自适应
很多问题不是单位本身的问题，而是用法越界：
-
100vw包含垂直滚动条宽度（通常 17px），可能触发横向滚动——改用width: 100%; max-width: 100vw; - 不要混合使用
vh和vw定义同一元素的宽高（如width: 50vh; height: 50vw;），全面屏设备易失衡 - PostCSS 插件如
postcss-pxtorem默认会把4vw转成4rem，务必配置 ignore 选项排除 vw/vh - 媒体查询仍不可弃：对
clamp()不支持的 IE，需 fallback：font-size: 16px; font-size: clamp(16px, 4vmin, 24px);
