vue响应式布局vw+vh+rem屏幕适配方案(视口布局的优点：宽度和高度全部自动适应再加上rem布局的字体适应，可以完美解决各种屏幕适配问题)

step1. vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（解决宽高自动适配）

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

step2. rem布局-解决字体适配（此布局在weex中无法识别）

rem布局原理：根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。

  @media only screen and (max-width: 1600px) and (min-width: 1280px){
    html{
      font-size: 14px;
    }
  }
  @media only screen and (max-width: 1280px) and (min-width: 960px){
    html{
      font-size: 12px;
    }
  }
  @media only screen and (max-width: 960px){
    html{
      font-size: 10px;
    }
  }

step3. vw、vh、rem的使用

<template>
    <div class="box">
        
    </div>
</template>
<style>
    .box{
        width:50vw;
        height: 20vh;
        line-height: 20vh;
        font-size: 1.5rem;
        margin:0 auto;
        font-weight: bold;
        background-color: rgba(255,255,255,0.8);
    }
</style>

总结：上面代码中的50vw代表了 此div占据视口宽度的50%、高度占据视口高度的20%，并且会随着视口的变化，进行自适应;字体则是1.5倍的html根字体大小。并且根据媒体查询进行字号变化。使用vw+vh+rem的布局之外，可以再加上elementUI的栅格布局，可以轻松、快速的搭配出真正的响应式布局，但要注意浏览器的兼容性问题
 

补充： vue单页面使用可直接复制以下进行使用

html,
body {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: black;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.indexBox {
    width: 100%;
    height: 100vh;
    background: #000000;
}
}