完美的響應式布局vw+vh+rem屏幕適配方案！

原文鏈接：https://blog.csdn.net/qq_24182885/java/article/details/81479457

一、前言

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

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

單位可參考 ：  你不知道的CSS單位

該布局兼容性如下：

 

 

二、正文

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