uniapp小程序横屏后适配问题（解决方案）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp小程序横屏后适配问题（解决方案）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题一：通常我们在小程序端切换横屏后会出现字体或宽高大小出现适配问题

uniapp适配平板横屏,vue,小程序,uni-app,微信小程序,Powered by 金山文档

解决方法

使用vmin来解决适配问题（使用rpx转换vmin）

rpx与vmin的换算关系：5rpx 等价 calc(5vmin * 100 / 750)== 简单写==>>5rpx 等价 calc(5vmin / 7.5)

vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
在这里我们只用到了vmin。
当我们在竖屏时候，100vmin的取值为手机屏幕宽度，当横屏时候，100vmin的取值仍然为手机屏幕宽度，所以以vmin为单位的元素，在手机屏幕发生旋转的时候，其显示大小并不会发生改变（毕竟不管横屏竖屏，100vmin都等于屏幕的宽度）。
在使用rpx进行布局时，750rpx的取值为手机屏幕的宽度，而在使用vmin时，100vmin的取值为手机屏幕的宽度，所以，rpx和vmin之间存在一个换算关系，即：x rpx=( x * 100 / 750)vmin。举个例子，75rpx转化为vmin为75 * 100 / 750 = 10 vmin。所以，我们只要将rpx转化成vmin就可以愉快的码页面了~

//css函数 声明函数
    @function tovmin($rpx){//$rpx为需要转换的字号
        @return #{$rpx * 100 / 750}vmin; 
    }
    //使用方式
.point {
                position: absolute;
                transform: translate(-50%, -50%);
                background-color: red;
                font-size: tovmin(20);//解决横竖屏模式下适配改变问题
                font-weight: 200;
                color: #ffffff;
                width: tovmin(30);
                height: tovmin(30);
                border-radius: tovmin(30);
                display: flex;
                justify-content: center;
                align-items: center;
            }

下面来看下效果（已经实现了哦）

竖屏模式下