px、rpx、em以及rem的区别与用法

px、rpx、em、rem是用于网页开发中表示全屏宽度或元素尺寸的单位。

  1. px(像素):是最常见的单位,它表示屏幕上的实际像素点。在不同设备上,px 会根据屏幕的分辨率进行换算,因此在不同设备上显示效果可能会有差异。

  2. rpx(响应式像素):是微信小程序中引入的单位,主要用于适配不同尺寸的手机屏幕。rpx 的换算规则是 750rpx 等于屏幕宽度,因此可以通过设置不同尺寸下的 rpx 值来实现适配效果。

复制代码
根据微信小程序官方规定,在iPhone6上,1rpx等于1物理像素。因此,正确的换算关系为:1px = 2rpx根据750px设计图,可以将像素值直接乘以2来得到相应的rpx值。
  1. em:是相对于父元素的字体大小的单位。如果父元素的字体大小为 16px,子元素设置 2em,则子元素的字体大小将会是 32px。

  2. rem(相对于根元素的字体大小):与 em 类似,但是相对的是根元素(即 html 元素)的字体大小。通常情况下,开发者会将根元素的字体大小设置为一个基准值,然后使用 rem 单位来表示其他元素的尺寸。这样可以方便地调整整个页面的比例。

http://pxtoem.com/

用法:

  • 对于常规网页开发,一般是使用像素单位 px 来定义元素的尺寸和字体大小,在不同设备上可能需要做响应式适配。

  • 对于微信小程序开发,可以使用 rpx 来适配不同尺寸的手机屏幕,在样式文件中可以直接使用 rpx 单位进行布局。

  • 在一些特殊场景下,例如需要相对父元素字体大小调整子元素大小时,可以使用 em 单位。

  • 如果需要整体页面的比例调整,可以使用 rem 单位,并设置根元素的字体大小为基准值。

相关推荐
雪碧聊技术7 小时前
Vue + Element Plus 实现文本溢出显示省略号及悬浮提示
前端·javascript·css·vue.js·文本溢出省略
小妖6668 小时前
设置了 box-sizing: border-box; 不管用,下边框还是被挤压没了
前端·css·html
柚yuzumi10 小时前
CSS 定位布局:让元素各就各位
前端·css
用户0595401744610 小时前
Qdrant 召回不一致踩坑实录:跑了 300 次测试才发现是索引没刷新
前端·css
用户059540174461 天前
AI Agent 上下文污染踩坑实录:用 pytest + Redis 揪出 3 类记忆串号 bug,排查 6 小时
前端·css
—Qeyser1 天前
html 可视化海报模板编辑器
css·html·js
我命由我123452 天前
CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度
前端·javascript·css·前端框架·html·html5·js
FFF_634560232 天前
简单的画板小工具,下载即用
前端·javascript·css
绝世唐门三哥2 天前
CSS 虚线下划线用法指南:text-decoration 完整解析
前端·javascript·css
DsirNg2 天前
用一个登录卡片讲清 CSS 盒模型:padding、border 与 box-sizing 到底如何影响布局
css·padding·box-sizing·表单布局·border·css 盒模型·登录卡片