视口单位(vw,vh,em,rem)的简单概述

文章目录

• 前言
• 一、视口是什么？
• 二、vw,vh,em,rem 简单概括

一、什么是视口？

视口代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分。

概括地说，视口基本上是当前文档的可见部分。

二、使用步骤

em

相对于父级元素的字号为标准计算“倍数”。

嵌套关系都使用em，会逐级相乘 例如：16px * 2 * 1.5 */

em是相对长度单位。相对于当前对象内本文的字体尺寸（如果没有设置本文尺寸，那就是相对于浏览器默认的字体尺寸，也就是16px），这样计算的话。如果没有设置字体尺寸就是1em = 16px。如果使用em的话，有个好的建议，就是将body的font-size设置成62.5%，也就是16px * 62.5% = 10px。这样的话1em = 10px，方便我们计算。

rem

rem：相对于根元素“html” 的字号为标准计算“倍数”。

vw vh

vw把视口的宽度分成100份，其中1vw代表一份

vh把视口的高度分成100份，其中1vh代表一份

和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

vh就是可视窗口的高度了。

vmin和vmax，vmin是指选择vw和vh中最小的那个，而vmax是选择最大的那个

---

总结

本文只是简单概述，方便大家更加理解~