web开发中常见的几种单位

• rem：相对于根元素而言，1rem等于根元素的font-size，一般浏览器的默认字体大小为16px

    html{
      font-size: 20px;
    }
    .box{
      width: 20rem;
      height: 20rem;
      background-color: orange;
    }

比如我们按照以上设置样式，可以看到如下效果

 类名为box的元素宽度和高度为400px了。

• px：像素px是相对于显示器分辨率而言，不会随着可视窗口的改变而改变，属于绝对单位。
• em：相对于父级元素的font-size而确定具体大小，如果我们编写以下css代码

    .parent{
      font-size: 20px;
    }
    .children{
      width: 20em;
      height: 20em;
      background-color: blue;
    }

此时对应的页面效果如下，可以看出带有children类名的蓝色盒子的宽度和高度都为父级字体大小的20倍了。

 

• rpx：微信小程序中的相对单位，解决屏幕自适应的尺寸问题。

以 iPhone6 为例，iPhone6 的屏幕宽度为 375px ，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素。所以在微信小程序开发中推荐按750px出设计图，此时1rpx=1px；

• vh：相对于视窗的高度计算大小，视窗高度为100vh;

计算方式：比如视窗高度为100px时，1vh就为 （1 * 100）/ 100 = 1px

• vw：相对于视窗的宽度计算大小，视窗高度为100vw;

计算方式：同vh

如有不足之处，还请大家多多指正。