微信小程序布局中的单位及使用:px、rem、rpx、vw、vh、n%
[ 2022-12-12 15:59:44 | 作者: admin ]
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%:父级容器的宽度百分百。
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%:父级容器的宽度百分百。
[最后修改由 admin, 于 2022-12-12 16:40:06]
评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2898
这篇日志没有评论。
此日志不可发表评论。