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.

相关推荐
ZC跨境爬虫1 天前
模块化烹饪小程序开发日记 Day2:全局配置与 tabBar 实现
java·前端·javascript·微信小程序·html·notepad++
idolao5 天前
npp.8.5.Installer文本编辑器安装步骤详解(附Notepad++配置与插件安装教程)
notepad++
px不是xp6 天前
【灶台导航】 RAG系统的容错设计:从向量搜索到关键词降级,一个都不能少
javascript·微信小程序·notepad++·rag
空中海7 天前
微信小程序 - 03 工程实践层与综合 Demo
微信小程序·小程序·notepad++
舟遥遥娓飘飘9 天前
面向零基础初学者,从环境搭建到发布上线,手把手教你开发第一个微信小程序(第3章-认识项目结构)
微信小程序·小程序·notepad++
优睿远行9 天前
微信小程序自定义组件开发实战:从封装到发布的全流程指南
微信小程序·小程序·notepad++
喜欢南方姑娘12 天前
微信小程序热更新-用户打开小程序时检测版本自动更新
微信小程序·小程序·notepad++
yzx99101312 天前
从零开始写一个微信小程序:完整代码实战指南(入门篇)
微信小程序·小程序·notepad++
fengyehongWorld13 天前
Notepad++ NppExec插件的使用
notepad++
fengyehongWorld15 天前
Notepad++ 常用插件
notepad++