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

px和rpx是尺寸单位,在网页开发中常用,而em和rem是字体尺寸单位,在网页开发和移动端开发中常用,下面分别介绍一下它们的区别和用法:

px:像素,是绝对单位,不会随字体大小变化而变化,像素值越大,元素越大。在开发中,常用于固定宽度的元素。使用方法:直接添加数值,如font-size: 12px;

rpx:相对像素,是微信小程序中的尺寸单位,可以根据屏幕宽度进行自适应缩放,一个屏幕宽度为750rpx。使用方法:直接添加数值,如width: 100rpx;

em:相对于父元素字体大小,是相对单位,根据父元素字体大小计算。使用方法:直接添加数值,如font-size: 2em; 表示字体大小是父元素字体大小的2倍。

rem:相对于根元素字体大小,根据根元素字体大小计算,设置在根元素上,一般默认为16px。使用方法:在根元素设置字体大小,如html{font-size: 16px;},然后使用rem设置元素的字体大小,如font-size: 1.5rem; 表示字体大小是根元素字体大小的1.5倍。

总体来说,px和rpx是固定的绝对长度单位,而em和rem是相对长度单位,根据父元素或根元素的字体大小计算。在开发中,应该根据实际需求选择合适的单位。

推荐给大家一个px,em,rem单位转换工具:PX to EM conversion made simple.

相关推荐
木易 士心1 天前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++
鸭鸭梨吖4 天前
微信小程序输入框---模糊搜索
微信小程序·小程序·notepad++
九皇叔叔9 天前
Windows用Notepad++编辑Shell脚本:一招解决Linux执行报错问题
linux·windows·notepad++
郑叔敲代码10 天前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
white-persist14 天前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式
xiecoding.cn15 天前
Notepad++下载安装图文教程(附安装包)
notepad++·notepad++下载安装·notepad++下载·notepad++安装教程·notepad++安装包·notepad++下载教程
黑客思维者18 天前
Notepad++中高危DLL劫持漏洞深度剖析
notepad++·漏洞·dll劫持
Nan_Shu_61418 天前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
知识分享小能手21 天前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
cpych23 天前
删除Notepad++关于弹窗的反动字样
notepad++