响应式布局

1、媒体查询@media

CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

选择300px、600px、900px、1200px作为分割点。根据浏览器宽度，设置不同的样式。

效果图:

代码:

<template>
  <div class="media-box">
    媒体查询响应式布局
  </div>
</template>

<script>
export default {

}
</script>

<style>
.media-box{
  color: #fff;
  /* 原有样式会被媒体查询样式覆盖掉 */
  background: #f90;
}
/* 浏览器宽度范围不同，显示不同的样式 */
@media (min-width: 0px) and (max-width: 300px) {
    .media-box{
        background: #0f0;
    }
}
@media (min-width: 300px) and (max-width: 600px) {
    .media-box{
        background: #0ff;
    }
}
@media (min-width: 600px) and (max-width: 900px) {
    .media-box{
        background: #ff0;
    }
}
@media (min-width: 900px) and (max-width: 1200px) {
    .media-box{
        background: #0ea8f0;
    }
}
/* 最小宽度1200px的样式 */
@media (min-width: 1200px) {
    .media-box{
        background: #7204b3;
    }
}
</style>

2、百分比布局%

通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。

效果图: 

代码:

<template>
    <div class="main-box">
      百分比布局
      <div class="percentage">
        百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局
      </div>
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
  .percentage{
    width: 100%;
    height: 100%;
    background: #09f;
  }
  </style>

3、视图窗口布局vw/vh

CSS3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。

vw  相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw

vh   相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh

vmin   vw和vh中的较小值

vmax   vw和vh中的较大值

效果图:

代码:

<template>
    <div class="main-box">
      视图窗口布局
      <div class="view">
        视口布局vw/vh。视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局视图窗口布局
      </div>
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
  .view{
    width: 100vw;
    height: 100vh;
    background: #f90;
  }
  </style>

4、rem布局

rem单位的特点: CSS3新增的单位，并且移动端的支持度很高，单位是动态根据html元素的font-size的值进行换算，根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需修改根元素font-size大小，即可完成适配。例如根元素为37.5px，1rem = 37.5px。12px = 12 / 37.5 = 0.32rem。

效果图:

代码:

<template>
    <div class="main-box">
      rem布局
      <div class="rem-box">
        rem单位
      </div>
      <div class="text">
        px单位
      </div>
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
  .rem-box{
    width: 5rem;
    font-size: 1.2rem;
    height: 100%;
    background: #09f;
  }
  .text{
    margin-top: 20px;
    font-size: 26px;
    width: 100px;
    height: 50px;
    background: #099;
  }
  </style>