1.小程序如何横屏
在手机上启用屏幕旋转支持
从小程序基础库版本 2.4.0 开始，小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是：在 app.json 的 window 段中设置 "pageOrientation": "auto" ，或在页面 json 文件中配置 "pageOrientation": "auto" 。
以下是在单个页面 json 文件中启用屏幕旋转的示例。
代码示例：
{
"pageOrientation": "auto"
}
如果页面添加了上述声明，则在屏幕旋转时，这个页面将随之旋转，显示区域尺寸也会随着屏幕旋转而变化。
从小程序基础库版本 2.5.0 开始， pageOrientation 还可以被设置为 landscape ，表示固定为横屏显示。
2.正常页面横屏后出现的适配问题
在正常情况下，竖屏页面的宽度100%、100vw的值为750rpx。但是横屏之后，750rpx的实际宽度为手机屏幕的高，如果我们在横屏状态下还是使用rpx，就会出现整体页面变大，字体以及组件都会变大的问题。
同样设置的尺寸，在横屏显示将会变大。假如说我们的屏幕宽高比为1:2的话，同样设置100rpx100rpx的按钮，在横屏状态下显示的大小是竖屏的2倍大小，但是他仍然是100rpx100rpx。显然这样往往是满足不了我们的需求的，页面会看起来非常难看。
横屏适配方案
1.使用px进行布局
虽然使用px布局，横屏之后元素没有变大，但是在不同设备上，屏幕的宽高是不一定的，667px不是所有设备都能占满屏幕，所以使用px布局还是有局限性。同样达不到我们想要的效果。
不同设备的效果差别还是挺明显，显然这样px的效果也总是不尽人意。
2.使用VMIN进行布局
首先简单介绍下css3的两个属性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就可以正常的进行横屏的开发。
<style lang="scss" scoped>
@function tovmin($rpx){//$rpx为需要转换的字号
@return #{$rpx * 100 / 750}vmin;
}
.main-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
.one {
width: tovmin(750);
height: tovmin(80);
background-color:red;
}
.two {
width: tovmin(1500);
height: tovmin(80);
background-color:red;
}
.three {
width: tovmin(200);
height: tovmin(80);
background-color:red;
}
}
</style>
既然我们可以通过vmin的方式进行横屏适配，vmin是将视口宽度和高度较小的那个平分100单位，同样我们是不是也可以用vh或者vw代替。
