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了

　　tips:最近又重新研究了一下橫屏這個，發現其實不管ios用戶是否開啟了屏幕固定或者android用戶是否開啟了屏幕自動旋轉，，都不需要使用css判斷橫豎屏來寫兩套樣式了，只需要以正常情況(即豎屏下)的寬度來計算，然后使用vmin作為單位即可，這樣寫一套樣式就全部搞定了。（vmin是相對於視口的寬度或高度中較小的那個來計算的）