👉 前言

在CSS中，经常会使用到各种计量单位来设定各种模块的长宽、大小比例 、边距大小 及 定位等。 常用的计量单位有：px、%、em 这几个，它们已经适用于大部分项目情景的开发中，且拥有比较好的兼容性。

但是从 CSS3 开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm（vmin、vmax）等一些新的计量单位。利用这些新的计量单位能更好的开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等。

接下来，小温将给大伙简单阐述下常用的计量单位及用法！

👉 介绍

在 CSS 单位中，可以分为相对长度单位、绝对长度单位，如下表所指示：

> 简述：

• %：百分比
• in：寸
• cm：厘米
• mm：毫米
• pt：point，约等于 1/72寸；
• pc：pica，约等于6pt，1/6寸；
• px：屏幕上的一个像素点；
• em：元素的 font-size；
• ex：font-size 的 x-height 值，为小写字母 x 的高度，通常相当于font-size的一半。
• ch：字符0(零)的宽度；
• rem：根元素(html元素)的font-size；
• vw：viewpoint width，可视窗口宽度，1vw等于视窗宽度的1%；
• vh：viewpoint height，可视窗口宽度，1vh等于视窗高度的1%；
• vmin：vw和vh中较小的那个。
• vmax：vw和vh中较大的那个。

往期内容 💨

🔥 ＜ 初识 TypeScript – 简介及安装流程 ＞

🔥 ＜ 在Vue中，为什么 v-if 和 v-for 不建议一起使用 ？ ＞

🔥 ＜Javascript技巧： Javascript 是个难泡的妞，学点技巧征服 “ 她 ” ＞

🔥 ＜ 知识拓展：前端代码规范 ＞