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 @   bug制造者~~  阅读(224)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示