关于小程序尺寸问题px rpx rem vw

本文深入解析了CSS中的px、rpx、rem、vw等单位的使用场景及换算关系,特别针对微信小程序的尺寸单位rpx进行了详细说明,帮助开发者更好地理解和应用这些单位,实现响应式布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

px

px:绝对单位,页面按精确像素展示。

在PC端经常使用的单位,不用计算,直接使用,一般情况不用考虑设计图纸的来改变页面的大小。就直接采用px,方便快捷但是不能自适应。 


RPX

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。

微信的自适应单位,同时微信规定:屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px。

设备 rpx换算px (屏幕宽度/750)  px换算rpx (750/屏幕宽度)
iPhone5  1rpx = 0.42px 1px = 2.34rpx
iPhone6   1rpx = 0.5px 1px = 2.00rpx
iPhone6s 1rpx = 0.552px   1px = 1.81rpx


REM

rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算。

微信小程序的rem尺寸单位,rem和rpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx =37.5rpx;

VW

vw、vh、vmin、vmax 主要用于页面视口大小布局,相对于rem;vw在页面布局上更加方便简单。

相对于视口的宽度。视口被均分为100单位的vw。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则1vw = 7.5px。不用关注是在什么屏幕下,只用关注设计图纸的宽度。假如:在750px的设计图纸,一个字体是30px,那么font-size: calc(30/7.5)vw,也就是font-size: 4vw。简单快捷,微信小程序支持,同时自适应很强。

参考:https://blog.youkuaiyun.com/m0_38082783/article/details/81304505 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值