vmax和vmin
vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
当竖屏布局时750rpx是竖屏布局屏幕的宽度
vmin不管横竖屏的情况下,100vmin都是手机屏幕的宽度,所以rpx与vmin之间有一个换算的关系:
x rpx=( x * 100 / 750)vmin
75rpx转化为vmin就是 75 * 100/750=10vmin
所以我们将rpx转化成vmin就可以正常的进行横屏的开发
设计图以1920*1080尺寸设计,蓝湖尺寸查看宽设置为4800
适配示例
<style lang="scss" scoped>@function tovmin($rpx) {/* $rpx为需要转换的字号 */@return #{$rpx * 100 / 750}vmin;}.dom {/* 铺满整屏 */width: tovmin(4800);height: tovmin(750);}
</style>