uni-app实现微信小程序横屏适配问题

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布局还是有局限性。同样达不到我们想要的效果。

iPhone6/7/8 iPhoneX

不同设备的效果差别还是挺明显，显然这样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代替。