使用vh/vw设置元素宽高是否为良好实践？100vh/100vw可作为通用标准吗

首先明确结论：这种做法不可行，也不属于良好的开发实践。100vh、100vw是为特定视口匹配场景设计的单位，完全不适合作为所有元素的宽高通用配置。

不建议作为通用方案的核心原因 #

• 移动端浏览器适配存在原生缺陷
  移动端的100vh计算默认会包含顶部地址栏、底部操作栏的占位高度，用户滚动页面时这些系统栏会自动收起，100vh对应的实际渲染高度会突然变化，直接设置会导致内容被截断、底部交互元素被系统栏遮挡，且安卓、iOS 对vh的计算逻辑还存在差异，额外增加适配成本。
• 滚动条空间计算偏差
  100vw的计算逻辑不会排除页面垂直滚动条的宽度，当页面内容高度超过一屏触发滚动条显示时，设置了100vw的元素会超出视口宽度，直接导致页面出现横向滚动条，破坏整体布局。
• 违背流式布局的通用逻辑
  绝大多数前端页面的高度由内容本身决定才是合理逻辑，强行给元素设置100vh会限制内容扩展性，当实际内容超过一屏高度时，要么出现内容被截断，要么元素内部出现独立滚动条，和页面全局滚动逻辑冲突，用户体验极差。
• 嵌套布局下的逻辑混乱
  vh、vw是相对于全局根视口的单位，如果你在嵌套层级的容器内设置100vh/100vw，它不会继承父容器的尺寸，直接对齐整个窗口尺寸，完全不符合常规布局的父子尺寸继承逻辑，后续维护很容易出现预期外的布局错乱。
• 无障碍适配不达标
  如果用户调整了系统字体缩放比例、开启大字体模式，固定基于视口的宽高会导致文字被挤压溢出，无法适配用户的个性化设置，不符合无障碍开发的基本要求。

当然这两个单位不是完全不能用，在全屏引导页、整屏海报展示、全屏模态框这类确定需要占满整个视口、不会有动态溢出内容的场景下使用是完全没问题的。

内容的提问来源于stack exchange，提问作者Ruby_Weapon