使用vh,vw配合媒體查詢做pc端的界面自適應

效果如下:

前景提要:
因爲我司後臺管理的頁面都需要在可視的瀏覽界面中展示所有內容,不允許在html,body中出現滾動條,查找了很多的佈局方法,都不盡人意.後面看到vw,vh單位,驚喜起來.特寫此文章

前端的環境:
利用vue cli3.x搭建,css預編譯使用的是less

一.全局引入less的變量
1.下載style-resources-loader,使用vue add這樣會自動在vue.config.js中給你配置出來。

vue add style-resources-loader

2.可以看到生成了vue.config.js文件,修改你的樣式文件路徑爲你的less文件的位置
(下面以我的爲例子)

const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // eslint-disable-next-line no-undef
        path.resolve(__dirname, 'src/assets/css/index.less')
      ]
    }
  }
}

二. 下面貼出我的less文件代碼
1.base.less

html,
body,
input,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
  margin: 0;
  padding: 0;
}

fieldset,
img {
  border: 0;
}

img {
    vertical-align: middle;
}

ul,
ol,
dl {
  list-style: none;
}

input {
  border: none;
  /* 清除獲取焦點高亮邊框 */
  outline: none;
}

a {
  text-decoration: none;
  color: black; /*因情況而定*/
}

button {
  border: none;
  background-color: transparent;
  outline: none;    //消除默認點擊藍色邊框效果
}

body {
    height: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    font-size: 0.5rem;
    letter-spacing: 1px;
  }
  
  label {
    font-weight: 700;
  }
  
  html {
    height: 100%;
    box-sizing: border-box;
  }
  
  #app {
    height: 100%;
  }
  
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  a:focus,
  a:active {
    outline: none;
  }
  
  a,
  a:focus,
  a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
  }
  
  div:focus {
    outline: none;
  }

  /*版心類*/
.w {
  width: 1440px; /*因情況而定*/
  height: 100%;
  margin: 0 auto;
}
  
  // 清除浮動
  .clearfix {
    &:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
  }

  // css3動畫效果
  // 從左到右
  @keyframes left-to-right {
   0%   {transform: translateX(40%);opacity: 0;}
   100% {transform: translateX(0);opacity: 1;}
  }

  // 從右到左
  @keyframes right-to-left {
    0%   {transform: translateX(-40%);opacity: 0;}
    100% {transform: translateX(0);opacity: 1;}
   }

   .title {
    width: 100%;
   .vh(56);
   padding: 0 16px;
   background-color: #336666;
   color: #fff;
   .line-height(56);
   font-size: 0.6rem;
}

2.global.less

// 根元素大小使用 vw 單位

@media (min-width: 1024px){
    html{font-size: 18px}
    } /*>=1024的設備*/

    @media (min-width: 1100px) {
    html{font-size: 20px}
    } /*>=1100的設備*/

    @media (min-width: 1280px) {
    html{font-size: 22px;}
    } /*>=1280的設備*/

    @media (min-width: 1366px) {
    html{font-size: 24px;}
    }  

    @media (min-width: 1440px) {
    html{font-size: 25px;}
    } 

    @media (min-width: 1680px) {
    html{font-size: 28px;}
    } 

    @media (min-width: 1920px) {
    html{font-size: 33px;}
    } 

// 公共屬性

// 公共顏色
@BASE_COLOR: #527474;
// 陰影
@BASE_SHADOW: 2px 2px 6px #BFBFBF;
// ui圖的寬
@BASE_VW: 1920vw;
// ui圖的高
@BASE_VH: 1080vh;


// 可視單位的換算

// 寬
.vw(@vw) {
    width:@vw/@BASE_VW * 100;
}

// 高
.vh(@vh) {
    height:@vh/@BASE_VH * 100;
}

// 字體的大小
.font-size(@size) {
    font-size: @size/@BASE_VW * 100;
}

// 行高
.line-height(@line) {
    line-height: @line/@BASE_VH * 100;
}

// padding
.padding(@top,@right,@bottom,@left) {
    padding-top: @top / @BASE_VH * 100;
    padding-right: @right / @BASE_VW * 100;
    padding-bottom: @bottom / @BASE_VH * 100;
    padding-left: @left / @BASE_VW * 100;
}

// margin
.margin(@top,@right,@bottom,@left) {
    margin-top: @top / @BASE_VH * 100;
    margin-right: @right / @BASE_VW * 100;
    margin-bottom: @bottom / @BASE_VH * 100;
    margin-left: @left / @BASE_VW * 100;
}

3.index.less

@import './global.less';
@import './base.less';

三.使用說明和注意事項
1.因爲的我設計圖給的尺寸是寬: 1920,高: 1080,你的不同,可以在global文件中的@BASE_VW,@BASE_VH屬性中改
2.然後就可以在你vue文件中用.vh() .vw()使用了.
3.對於特殊盒子,比如圖片的尺寸需要等比例的,你就用.vh(),然後寬用width: auto,這樣就行了

**不足之處,請評論區給予提醒,謝謝大家!