平板横竖屏适配问题

因为平板更容易变换方向，相较于手机设备，更需要进行适配处理

除了在head中加入这句必备代码之外，

<meta name="viewport" content="width=device-width, initial-scale=1" />

我们还可以做点别的：

1、如果是嵌入到客户端中，可以通过调用接口的方式来禁止用户横屏操作，这种方式简单粗暴，也很有效，很多客户端的活动页都是这样做的；

2、如果没法控制用户操作，就只能通过媒体查询的方式来对横竖屏样式进行适配

@media screen and (orientation: portrait) {
      /*竖屏 css*/
}

@media screen and (orientation: landscape) {
      /*横屏 css*/
}

也不是非要把横竖屏分开来写样式，这样会比较冗长，其实横竖屏样式都是一直的，只是说展示的大小区域有分别

所以可以将竖屏的样式写在公共部分，在横屏时，做少许的修改即可。

为了更好的适配，我们通常会选择使用百分比，我认为直接使用vw更方便，下面是一段适配的样式代码：

.XXXX {
  background-color: #f94f4f;
  width: 100vw;
  height: 100vh;
  .wrapper {
    @keyframes upup {
      0% {
        bottom: 15vw;
      }
      50% {
        bottom: 16vw;
      }
      100% {
        bottom: 15vw;
      }
    }
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow-y: scroll;
    user-select: none;
    width: 100vw;
    margin: 0 auto;
    .sect {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      justify-content: center;
      .backImg {
        width: 100%;
      }
    }
    .btn-box {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: 77.5vw;
      .tag {
        animation: 1s upup linear infinite;
        position: absolute;
        bottom: 15vw;
        width: 100%;
      }
      .btn {
        position: absolute;
        bottom: 5vw;
        width: 100%;
      }
    }
  }
  .receivedDialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    .content {
      width: 67.5vw;
      position: relative;
      .backImg {
        width: 100%;
      }
      .btn {
        bottom: 8.5vw;
        width: 55.5vw;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
      }
      .time {
        font-size: 3vw;
        position: absolute;
        left: 0;
        bottom: 5vw;
        width: 100%;
        text-align: center;
        color: #4d4d4d;
      }
    }
  }
  .loading-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(225, 225, 225, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    .ant-spin-lg .ant-spin-dot {
      font-size: 6vw;
    }
  }
}

@media screen and (orientation: landscape) {
  /*横屏 css*/
  .CloudServices {
    @x: 0.75;
    .wrapper {
      @keyframes upup {
        0% {
          bottom: 15vh * @x;
        }
        50% {
          bottom: 16vh * @x;
        }
        100% {
          bottom: 15vh * @x;
        }
      }
      width: 100vh * @x;
      .btn-box {
        width: 77.5vh * @x;
        .tag {
          bottom: 15vh * @x;
        }
        .btn {
          bottom: 5vh * @x;
        }
      }
    }
    .receivedDialog {
      width: 100vw;
      .content {
        width: 67.5vh * @x;
        .btn {
          bottom: 8.5vh * @x;
          width: 55.5vh * @x;
        }
        .time {
          font-size: 3vh * @x;
          bottom: 5vh * @x;
        }
      }
    }
    .loading-wrapper {
      .ant-spin-lg .ant-spin-dot {
        font-size: 6vh * @x;
      }
    }
  }
}