Vue-H5移动页面-强制横屏

html部分：

<template>  
  <div class="sign">
     强制横屏啦~
  </div>
</template>

js部分：

mounted () {    
  this.$nextTick(function () { 
    // 强制横屏 设置      
    window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', function () {
      setRem()      
    })
    function setRem () {        
      var html = document.querySelector('html')
      var width = html.getBoundingClientRect().width
      var height = html.getBoundingClientRect().height 
      // 判断横屏        
      if (width < height) {
        // 竖屏
        html.style.fontSize = height / 16 + 'px'
      }        
      if (width > height) {
        // 横屏
        html.style.fontSize = width / 16 + 'px'
      }
    }      
    setRem()
  })
},

css部分：

@media screen and  (orientation:  portrait){
  .sign{
    -webkit-transform:rotate(90deg);
    -webkit-transform-origin:0% 0%;/*1.重置旋转中心*/
    -moz-transform: rotate(90deg);
    -moz-transform-origin:0% 0%;
    -ms-transform: rotate(90deg);
    -ms-transform-origin:0% 0%;
    transform: rotate(90deg);
    transform-origin:0% 0%;
    width: 100vh;/*2.利用 vh 重置 ‘宽度’ */
    height: 100vw;/* 3.利用 vw 重置 ‘高度’ */
    top: 0;
    left: 100vw;/* 4.旋转后页面超出屏幕，重置页面定位位置 */
}}

此文借鉴于某大牛的文章基础之上整理的笔记~