＜ 知识拓展：CSS 中常用的计量单位有哪些？ ＞

👉 前言

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

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

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

👉 介绍

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

CSS计量单位	举例
相对长度单位	em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位	cm、mm、in、px、pt、pc

> 简述：

• %：百分比
• 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中较大的那个。

📃 知识拓展

• vw / vh 中 ，可视窗口，在PC端，指的是浏览器的可视区域；在移动端，指的是布局视口。
• em是作为一个相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明 font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px
• 任意浏览器的默认字体高都是 16px
• rem，相对单位，相对的只是 HTML 根元素font-size的值。简化 font-size 的转化，和 em 转化一样，在根元素 html 中加入 font-size: 62.5%。
• vw、vh 比较容易和 %混淆，不过百分比宽泛的讲是相对于父元素：
  ① 对于普通定位元素就是我们理解的父元素
  ② 对于position: absolute;的元素是相对于已定位的父元素
  ③ 对于position: fixed;的元素是相对于 ViewPort（可视窗口）

---

往期内容 💨

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

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

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

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