微信小程序----解析px、rpx、rem、vw实现页面布局

---

title: 微信小程序----解析px、rpx、rem、vw实现页面布局
date: 2018-07-31 14:22:14
tags: 页面布局
categories: 微信小程序

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

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。简单快捷，微信小程序支持，同时自适应很强。

VW上线实例小程序

1. 观合中医

总结

经过个人的开发实践经验，个人推荐使用VW单位解决微信小程序的适配方案，开发快捷、简单、易懂。所以推荐使用VW作为微信小程序的适配单位。

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

QQ交流群：264303060

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表