px,rpx,em,rem,vw/vh,百分比的区别?

px:

  • 绝对长度单位,当浏览器页面缩放时,px 并不能跟随变大。当前网页的布局就会被打破。

rpx:

  • rpx是微信小程序独有的、解决屏幕自适应的尺寸单位;
  • 可以根据屏幕宽度进行自适应,不论大小屏幕,规定屏幕宽为 750rpx
  • 通过 rpx 设置元素和字体的大小,小程序在不同尺寸的屏幕下,可以实现自动适配

rpx 和 px之间的区别:

  • 在普通网页开发中,最常用的像素单位是px
  • 在小程序开发中,推荐使用 rpx 这种响应式的像素单位进行开发

em:

  • 相对长度单位,em 是相对于当前元素的父元素的 font-size 进行计算,如果当前元素未设置则相对于浏览器的默认字体尺寸。
<div class="a">A
    <div class="b">B
        <div class="c">C</div>
    </div>
</div>

<style>
 .a{ font-size:16px;}
 .b{ font-size:2em;} /* 相当于32px */
 .c{ font-size:1em;} /* 相当于32px */
</style>

 

posted @ 2022-07-06 16:20  bug制造者~~  阅读(236)  评论(0)    收藏  举报