CSS新单位dvh、lvmin、vi、cqb等初解
内容提要
本文介绍了CSS新增的动态视区高度（dvh）、小视口高度（svh）、大视口高度（lvh）和容器查询单位（cqw、cqh等），这些单位帮助开发者适应不同浏览器工具栏的变化和响应式布局需求，特别是dvh在处理动态高度时非常实用。文章强调了学习新单位的重要性。
关键要点
-
CSS新增了动态视区高度（dvh）、小视口高度（svh）、大视口高度（lvh）和容器查询单位（cqw、cqh等）。
-
dvh单位用于处理动态高度，适用于iOS Safari浏览器中工具栏变化的情况。
-
svh表示假定浏览器所有工具栏全部展开的高度，lvh表示假定所有工具栏全部收起的高度。
-
CSS逻辑单位以i和b结尾，分别表示水平方向和垂直方向，实际应用较少。
-
cq家族单位用于容器查询，cqw、cqh等单位在弹性布局中非常有用。
-
容器查询单位的兼容性与动态视区单位相似，Chrome支持较早，Safari支持较晚。
延伸解读
动态视区单位的实用性
动态视区高度（dvh）在处理iOS Safari浏览器中工具栏变化时尤为重要。使用dvh可以确保布局在用户滚动时不会出现问题，特别适合全屏应用和动态内容展示。开发者应优先考虑在这些场景中使用dvh，以提升用户体验。
容器查询单位的优势
容器查询单位（如cqw、cqh）为响应式设计提供了更灵活的解决方案。它们允许开发者根据容器的实际尺寸调整布局，适用于复杂的弹性布局场景。了解这些单位的使用场景，可以帮助开发者更好地适应不同设备和屏幕尺寸。
CSS逻辑单位的局限性
虽然CSS逻辑单位（如vi、bi）在理论上提供了水平和垂直方向的灵活性，但在实际应用中使用频率较低。开发者应关注这些单位的存在，但在大多数情况下，传统的vw和vh单位仍然是更实用的选择。
延伸问答
CSS中的dvh单位有什么用处？
dvh单位用于处理动态高度，特别适用于iOS Safari浏览器中工具栏变化的情况。
svh和lvh分别表示什么？
svh表示假定浏览器所有工具栏全部展开的高度，lvh表示假定所有工具栏全部收起的高度。
CSS逻辑单位的特点是什么？
CSS逻辑单位以i和b结尾，分别表示水平方向和垂直方向，但实际应用较少。
容器查询单位cqw的作用是什么？
cqw用于查询容器宽度的1%，在弹性布局中非常有用。
CSS新增单位的兼容性如何？
容器查询单位的兼容性与动态视区单位相似，Chrome支持较早，Safari支持较晚。
为什么需要学习新的CSS单位？
学习新单位可以帮助开发者适应不同浏览器工具栏的变化和响应式布局需求。
