vw+vh+rem響應式布局

科普下：

平時很少用的css單位:

1.長度單位：

rem:相對長度單位。相對於根元素(即html元素)font-size計算值的倍數;

vw:相對於視口的寬度。視口被均分為100單位的vw;

vh:相對於視口的高度。視口被均分為100單位的vh;

vmax:相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax;

vmin:相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin;

ch:數字0的寬度;

2.角度單位（transform用到的比較多）

deg:度（Degress）。一個圓共360度;

grad:梯度（Gradians）。一個圓共400梯度;

rad:弧度（Radians）。一個圓共2π弧度;

turn:90deg = 100grad = 0.25turn ≈ 1.570796326794897rad,即1turn=1圈=360deg=400grad=2π;

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

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

vw + vh + rem布局首先還是

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

其次：直接上代碼

<template>
  <div class="mobile_box">
    <h1>移動端測試布局使用vw+vh+rem</h1>
    <div class="test_port">
        <p>測試視口</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  },
  methods: {

  }
}

</script>
<style scoped>
.test_port {
  width: 30vw;
  height: 50vh;
  line-height: 50vh;/*講白了就是可視窗口寬高單位 + 字體用rem等比縮放*/
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
  border:1px dashed #ccc;
  background-color: rgba(255, 255, 255, 0.8);
}

h1 {
  text-align: center;
}

</style>

總結：代碼這樣的東西沒必要完全按照別人的來，怎么合適怎么方便怎么效率好怎么來咯。

另外附上媒體查詢@media

  @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;
    }