h5橫屏（以vue爲例）

　　最近在作的一個項目是關於h5橫屏的。剛開始聽到這個需求我是一臉的懵逼，由於從未接觸過橫屏，也沒有看到h5橫屏的項目。當時還問了公司另一位前端小哥，他說他也沒作過，不太清楚。。沒辦法，領導需求就是這樣的，只能硬着頭皮上了。。　　

　　回到本身的工位後，開始各類查資料。。然而關於橫屏的確實不多。這裏找到一篇關於橫屏的。中間有些東西還不錯，我拿來借用一下，附上原文連接：h5開發：橫屏適配。

　　強制橫屏展現，這裏用到了css3的旋轉功能，就是對屏幕 resize 事件進行監聽，當判斷爲豎屏時將整個根容器進行逆時針 CSS3 旋轉 90 度便可。代碼以下：

　　在mounted生命週期中監聽resize事件：window.addEventListener('resize', this.resize)

　　resize方法以下：　

resize () {
      var width = window.innerWidth,
          height = window.innerHeight,
          $wrapper = document.getElementById("app"),
          style = "";
      if (width >= height) { // 橫屏
        style += "width:" + width + "px;";  // 注意旋轉後的寬高切換
        style += "height:" + height + "px;";
        style += "-webkit-transform: rotate(0); transform: rotate(0);";
        style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      }
      else { // 豎屏 
        style += "width:" + height + "px;";
        style += "height:" + width + "px;";
        style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
        // 注意旋轉中點的處理
        style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      }
      $wrapper.style.cssText = style;
    }

　　好了。到這裏已經完成了一小步了。接下來就是適配的問題了。我採用的是vw跟vh。之前沒用過，初次接觸，用過以後感受真的挺好用的。

　　假如ios用戶開啓了屏幕固定或者android用戶開啓了屏幕自動旋轉。這兩種狀況下，會有一點不同。這時候使用css判斷橫豎屏就顯得尤爲重要了。代碼以下：　

/* 豎屏 */
@media screen and (orientation:portrait) {
    // 以vw爲單位
}

/* 橫屏 */
@media screen and (orientation:landscape) {
　　// 以vh爲單位
}

　　在豎屏的時候使用vw來進行適配。即根據屏幕的寬度來適配。這裏以375 x 667的設計稿爲例。例如：一個元素寬爲526，高爲314。根據屏幕的寬度來適配的話就是526/375 * 100% vw、314/375 * 100% vw了。

　　若是是橫屏的話，就是用vh來進行適配。即根據屏幕的高度來適配。一樣以375*667的設計稿爲例。此時元素寬爲526，高爲314。就該寫成寬爲526/375 * 100% vh、高爲314/375 * 100% vh了