小程序
小游戏
企业微信
微信支付
扫描小程序码分享
前段时间我特意研究了下rem的实现并且自己写了rem响应式代码和css方式的手机端响应式方式。
但是在这个之前我是特别翻查了很久的关于微信rpx实现方式，但是网上都没有。有大神给解释。
上代码的那种最好
希望有大神能给出代码实现逻辑就行
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。
如图2-9所示，同一个元素，在不同宽度的屏幕下，如果使用px为尺寸单位，有可能造成页面留白过多。
图2-9 使用px尺寸单位，iPhone5与iPad视觉对比
修改为rpx尺寸单位，效果如图2-10所示。
图2-10 使用rpx尺寸单位， iPhone5与iPad视觉对比
小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。
举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。
图2-11 常用机型rpx尺寸换算表
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
额，原理懂，但是物理像素这块如何确定呢？
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
尺寸单位
在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。
如图2-9所示，同一个元素，在不同宽度的屏幕下，如果使用px为尺寸单位，有可能造成页面留白过多。
图2-9 使用px尺寸单位，iPhone5与iPad视觉对比
修改为rpx尺寸单位，效果如图2-10所示。
图2-10 使用rpx尺寸单位， iPhone5与iPad视觉对比
小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。
举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。
图2-11 常用机型rpx尺寸换算表
额，原理懂，但是物理像素这块如何确定呢？