微信小程序布局中的单位及使用:px、rem、rpx、vw、vh、n%


原文链接:https://blog.csdn.net/qq_44577070/article/details/103230715

 

px:就是 Pixel 的缩写,就是指像素,图片采样的基本单位。

rem:把页面按比例分割达到自适应的效果。规定屏幕宽度为 20 rem,根据屏幕大小动态的设置 fontsize,来达到不同的分辨率下有一样的效果。

rpx:这个单位是微信小程序中特有的尺寸单位,也是把页面按比例分割达到自适应的效果。规定屏幕宽为750rpx,就是把屏幕宽度分成750部分,根据屏幕宽度进行自适应。可与 rem 换算:1 rem = (750/20) rpx =37.5 rpx

如在 iPhone6 上,屏幕宽度逻辑像素为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。所以开发微信小程序时用 iPhone6 作为视觉稿的标准,单位换算相对简单 。

vw:视窗宽度,1vw等于视窗宽度的1%。

vh:视窗高度,1vh等于视窗高度的1%。

n%:父级容器的宽度百分百。



免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM