uniapp rpx、px、em、rem、%、vh、vw的区别是什么?

rpx、px、em、rem、%、vh、vw都是CSS中用于设置元素尺寸和定位的单位,但它们各自具有不同的特点和适用场景。

  1. px(像素):px是绝对长度单位,描述一个元素的宽高以及定位信息。它是相对于显示器屏幕分辨率而言的,页⾯按精确像素展⽰。
  2. rpx(响应式像素):rpx是微信小程序独有的单位,解决屏幕自适应的问题。它可以根据屏幕宽度进行自适应,相当于把屏幕宽度分为750份,1份就是1rpx。
  3. em:em是相对长度单位,基准点是父元素的字体大小。如果自身定义了font-size属性,那么就会按照自身来计算。整个页面内,1em不是一个固定的值,会继承父级元素的字体大小。
  4. rem:rem是相对单位,相对于根元素html的字体大小来计算,这样只需要在根目录确定一个参考值,就可以设计整个页面的比例。
  5. %:百分比是基于父元素的尺寸,是一种相对单位。
  6. vh、vw:vh和vw是视口单位,相对于视口的高度和宽度。1vh等于视口高度的1/100,1vw等于视口宽度的1/100。

综上所述,这些单位各有特点,适用于不同的场景。在选择使用哪个单位时,需要根据具体的需求和上下文环境来决定。

你可能感兴趣的:(uni-app)