Vue中实现页面自适应的几种方式

1、 vue 中使用 rem 布局

rem：相对于根元素的字体大小的单位，比如设置根元素的font-size为12px，那么1rem的大小就是12px,通常用于web app中，一般app中都是宽度固定，高度出现滚动条。因此比较适合使用rem

rem的工作原理是：页面元素使用rem来进行布局，当页面分辨率发生改变时，根元素的字体大小随之发生改变，因此使用rem定义的元素大小等属性也会发生改变

在进行web page的可视化大屏开发中，页面内容随改变浏览器窗口大小发生变化也可以使用rem来实现，那么如何做到在vue使用px书写，但是也能达到rem的效果呢，需要借助postcss-px2rem和px2rem-loader插件

1. 安装postcss-px2rem及px2rem-loader

npm install postcss-px2rem --save 
npm install px2rem-loader --save

2. 在根目录src中新建util目录下新建rem.js等比适配文件

/ rem等比适配配置文件 
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () { 
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。 
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整） document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } 
// 初始化
setRem() 
// 改变窗口大小时重新设置 
rem window.onresize = function () { setRem() }

3. 在main.js中引入适配文件

import './util/rem'

4. 到vue.config.js中配置插件

// 引入等比适配插件 
const px2rem = require('postcss-px2rem') 
// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同 
  remUnit: 16
}) 
// 使用等比适配插件 
module.exports = { lintOnSave: true, css: { loaderOptions: { postcss: { plugins: [ postcss ] } } } }

2、 css的媒体查询

用于在不同分辨率下设置特定元素样式

语法：

 @media mediaType and|not|only (media feature) {
  /*CSS-Code;*/
 }

使用方法：

// 最大宽度为1280
@media (max-width: 1280px) {
  body {
    background: pink;
  }
}
 
 // 宽度为1281-1366之间
@media (min-width: 1281px) and (max-width: 1366px) {
  body {
    background: red;
  }
}
 
// 最小宽度为1441 
@media (min-width: 1441px) {
  body {
    background: green;
  }
}

3、css中的vh和vm

vh和vm是相对视口区域的宽高，即浏览器可视区域

• vw：1vw等于视口宽度的1%。
• vh：1vh等于视口高度的1%。

使用场景：页面头部和尾部固定，中间内容若高度超出，则出现滚动条，但是整个页面不出现滚动条，在此情况下就要计算中间内容的高度，可以使用vh解决

// 200px为头部加尾部高度
height:calc(100vh - 200px)