🔥px、em、rem和rpx的区别介绍在css中常用的单位长度：px、em、rem、rpx；rpx一般用于移动端开发

介绍

在css中常用的单位长度：px、em、rem、rpx；rpx一般用于移动端开发；

px是固定的像素，是相对于显示器屏幕分辨率而言的，一旦设置了就无法因为适应页面大小而改变；
为了解决px的问题，提出了em。
- 它是相对于当前对象内文本的font-size，若没有设置行内文本的字体font-size，则使用浏览器默认字体size，一般为16px。
- 开发中一般都是以<body>的font-size为基准。
rem是CSS3新增加的相对单位，即root em，是相较于根元素html。
rpx是小程序中的度量单位；

rpx是以iphone 6的手机大小（width:375、height:667）为基准，iphone 6整个屏幕width为750rpx,高度为1334rpx;
iphone 6的rpx兑换px比例是0.5,其他手机的兑换比例是以屏幕的width/750。
可以说移动端的UI布局适配需要将屏幕的宽度等分成750份，每一份就是1rpx

em、rem、rpx相对于px更具有灵活性，都有各自的优缺点，根据不同的场景，选取合适的屏幕适配的单位；

总之：对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

em 使用

<div class="wh">
    父元素div
    <p class="wh">
       子元素p
        <span class="wh">孙元素span</span>
    </p>
</div>

  .wh {
    width: 7.5em;
    height: 7.5em;
  }

  div {
    font-size: 40px;/* 即1em = 40px = font-size */
    border: solid 2px black;
  }

  p {
    font-size: 0.5em;/* 相对于父级 20px = (40*0.5)px */
    border: solid 2px blue;
    color: blue;
  }

  span {
    font-size: 0.5em;
    border: solid 1px red;
    display: block;
    color: red;
  }

注意：

p元素中的font-size属性值是以父级div的font-size为基准的。
classwh中的em单位，是以当前元素的font-size为基准 如图所示：

rem使用

这里我们共用上面的html代码
css代码只把em更换成rem
增加html:font-size: 40px;

html{
    font-size: 40px;
  }
  .wh {
    width: 7.5rem;
    height: 7.5rem;
  }

  div {
    font-size: 1rem;/* 即1rem = 40px = font-size */
    border: solid 2px black;
  }

  p {
    font-size: 0.5rem;/* 相对于父级 20px = (40*0.5)px */
    border: solid 2px blue;
    color: blue;
  }

  span {
    font-size: 0.5rem;
    border: solid 1px red;
    display: block;
    color: red;
  }

注意：

所有的元素都变成了等宽等高
子元素中的字体大小不受父元素的影响了

参考：作者：小只前端攻城狮链接：juejin.cn/post/696387…