前言

大家好，我是HoMeTown，明天聊一下CSS中em、px、rem、vh、vw这些单位都有什么区别，什么时候该用什么单位，如何正确应用。

What？

首先，在咱们日常中的传统开发中，px作为一等公民，成为了咱们应用最多的单位，其次是%以及em等单位，失常状况下，px能够实用于大部分我的项目的开发，并且，具备良好的兼容性，然而从CSS3开始，浏览器对这些计量单位的反对又晋升到了一个新的高度，陆续推出了rem、vh、vw以及vm等一些新的计量单位，利用这些单位，敌对的帮忙咱们解决了开发响应式页面的问题，使得咱们开发进去的页面能够适配不同分辨率的设施。真香！

计量单位

在CSS的计量单位体系中，能够分为绝对长度单位和相对长度单位：

  • 绝对长度单位包含：em、ex、ch、rem、vw、vh、vmin、vmax、%
  • 相对长度单位包含：cm、mm、in、px、pt、pt、pc

px

即像素，由计算机根底或者设计根底的同学应该都比拟理解，像素其实就是对应咱们显示器上的一个个等同大小的点，因而，像素在计量单位体系中，属于相对长度单位，之前看到过网上的一些争执对于px是否为相对长度单位，我认为是属于相对长度单位，因为即便在挪动端中存在设施像素比，px理论大小不确定，然而从主观的角度登程，px的大小和元素与其余的属性无关。

特点：

  • 兼容性好
  • 使用方便

em

em属于绝对长度单位。绝对对象为以后对象内文本的字体size，如果以后行内文本的字体尺寸未设置，则绝对对象为浏览器的默认字体尺寸1em = 16px。

个别状况下，为了简化font-size的换算，咱们须要在css中的body选择器中申明font-size=62.5%，使得em值变为16px*62.5% = 10px，这样 12px = 1.2em, 10px = 1em, 也就是说只须要将你的原来的px 数值除以 10，而后换上 em作为单位即可。

特点：

  • em 的值不固定
  • em 会继承父级元素的字体尺寸
  • em 是绝对长度单位，绝对以后行内对象的文本尺寸，如未设置，绝对浏览器的默认字体尺寸

举个

<div class="outside">    我是14px=14.rem    <div class="innerside">我是12px=1.2rem</div></div>
html {    font-size: 10px;  /* 公式16px*62.5%=10px */ } .outside {    font-size: 1.4rem} .innerside{    font-size: 1.2rem}

此时，.outside的font-size为14px，而.innerside的font-size为16px，能够从图中显著看进去差别。

rem

rem是绝对单位，与em不同的是，绝对对象只是html根元素的font-size，与em同理，能够在根元素中写入font-size: 62.5%，来简化转化。

html {    font-size: 62.%; /* 公式16px*62.5%=10px */}

这样，在咱们的页面中1rem = 10px、1.2rem = 12px，以此类推。

特点：

  • rem单位有px & em 两者的长处

vh、vw

vw ，就是依据窗口的宽度，分成100等份，100vw就示意满宽，50vw就示意一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度

这里的窗口分成几种状况：

  • 在桌面端，指的是浏览器的可视区域
  • 挪动端指的就是布局视口

像vw、vh，比拟容易混同的一个单位是%，不过百分比宽泛的讲是绝对于父元素：

  • 对于一般定位元素就是咱们了解的父元素
  • 对于position: absolute;的元素是绝对于已定位的父元素
  • 对于position: fixed;的元素是绝对于 ViewPort（可视窗口）

总结

px：相对单位，页面按准确像素展现

em：绝对单位，基准点为父节点字体的大小，如果本身定义了font-size按本身来计算，整个页面内1em不是一个固定的值

rem：绝对单位，可了解为root em, 绝对根节点html的字体大小来计算

vh、vw：次要用于页面视口大小布局，在页面布局上更加不便简略