20.小程序:布局适配方案(rpx、px、vw、vh)

来源:简书 分类: 文章浏览史 发布时间:2020-08-30 23:01:54 最后更新:2020-08-30 浏览:127
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-30 23:01:54

1.rpx适配

rpx是小程序中的尺寸单位,它有以下特征:

小程序的把所有的屏幕宽固定为了750rpx(即750个物理像素),在所有设备上都是如此.
1rpx=(screenWidth / 750)px,其中screenWidth为手机屏幕的实际的宽度(单位px),例如iphone6的screenWidth=375px,则在iphone6中1rpx=0.5px

由上可知,在不同设备上rpx与px的转换是不相同的,但是宽度的rpx却是固定的,所以可以使用rpx作为单位,来设置布局的宽高。

2.vw、vh适配

vw和vh是css3中的新单位,是一种视窗单位,在小程序中也同样适用。

小程序中,窗口宽度固定为100vw,将窗口宽度平均分成100份,1份是1vw
小程序中,窗口高度固定为100vh ,将窗口高度平均分成100份,1份是1vh
所以,我们在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局,但是一般情况下,百分比+rpx就已经足够使用了,所以它们的出场机会很少。

常见问题

如何把一个view的高度怎么设置成满屏?
下面方法是达不到效果的,设置完但是显示还是自动收缩高度,怎么才能让高度是满屏呢

.container{
  height: 100%;
  background-color: #CCC;
}

解决方案:改为height: 100vh;即可,具体如下:

.container{
  height: 100vh;
  background-color: #CCC;
}
php技术微信