一、前言

根據前面寫的  你不知道的CSS單位，進行了一種響應式佈局的思考。  

視口布局的優點：寬度和高度全部自動適應！再加上rem佈局的字型適應，可以完美解決各種螢幕適配問題！

該佈局相容性如下：

二、正文

1、vw、vh是基於視口的佈局方案，故這個meta元素的視口必須宣告。（解決寬高自動適配）

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

2、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;
    }
  }
 

3、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的柵格佈局，可以輕鬆、快速的搭配出真正的響應式佈局，但要注意瀏覽器的相容性問題！