vue能不能实现自适应

这篇文章主要讲解了“vue能不能实现自适应”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue能不能实现自适应”吧！

vue能实现自适应，其实现自适应的方法有：1、通过“npm install”或“yarn add”命令安装“scale-box”组件，并使用“scale-box”实现适配缩放；2、通过设置设备像素比例实现自适应；3、通过JS设置zoom属性调整缩放比例来实现自适应即可。

Vue屏幕自适应三种实现方法详解

使用 scale-box 组件

属性：

• width宽度 默认1920

• height高度 默认1080

• bgc背景颜色 默认"transparent"

• delay自适应缩放防抖延迟时间（ms） 默认100

vue2版本：vue2大屏适配缩放组件（vue2-scale-box - npm）

npm install vue2-scale-box

或者

yarn add vue2-scale-box

使用方法：

<template>


    <div>


        <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">


            <router-view />


        </scale-box>


    </div>


</template>


<script>


import ScaleBox from "vue2-scale-box";


export default {


    components: { ScaleBox },


};


</script>


<style >


body {


    margin: 0;


    padding: 0;


    background: url("@/assets/bg.jpg");


}


</style>

vue3版本：vue3大屏适配缩放组件（vue3-scale-box - npm）

npm install vue3-scale-box

或者

yarn add vue3-scale-box

使用方法：

<template>


    <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">


        <router-view />


    </ScaleBox>


</template>


<script>


import ScaleBox from "vue3-scale-box";


</script>


<style >


body {


    margin: 0;


    padding: 0;


    background: url("@/assets/bg.jpg");


}


</style>

设置设备像素比例（设备像素比）

在项目的 utils 下新建 devicePixelRatio.js 文件

class devicePixelRatio {


  /* 获取系统类型 */


  getSystem() {


    const agent = navigator.userAgent.toLowerCase();


    const isMac = /macintosh|mac os x/i.test(navigator.userAgent);


    if (isMac) return false;


    // 目前只针对 win 处理，其它系统暂无该情况，需要则继续在此添加即可


    if (agent.indexOf("windows") >= 0) return true;


  }


  /* 监听方法兼容写法 */


  addHandler(element, type, handler) {


    if (element.addEventListener) {


      element.addEventListener(type, handler, false);


    } else if (element.attachEvent) {


      element.attachEvent("on" + type, handler);


    } else {


      element["on" + type] = handler;


    }


  }


  /* 校正浏览器缩放比例 */


  correct() {


    // 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化


    document.getElementsByTagName("body")[0].style.zoom =


      1 / window.devicePixelRatio;


  }


  /* 监听页面缩放 */


  watch() {


    const that = this;


    // 注意: 这个方法是解决全局有两个window.resize


    that.addHandler(window, "resize", function () {


      that.correct(); // 重新校正浏览器缩放比例


    });


  }


  /* 初始化页面比例 */


  init() {


    const that = this;


    // 判断设备，只在 win 系统下校正浏览器缩放比例


    if (that.getSystem()) {


      that.correct(); // 校正浏览器缩放比例


      that.watch(); // 监听页面缩放


    }


  }


}


export default devicePixelRatio;

在App.vue 中引入并使用即可

<template>


  <div>


    <router-view />


  </div>


</template>


<script>


import devPixelRatio from "@/utils/devicePixelRatio.js";


export default {


  created() {


    new devPixelRatio().init(); // 初始化页面比例


  },


};


</script>


<style >


body {


  margin: 0;


  padding: 0;


}


</style>

通过JS设置zoom属性调整缩放比例

在项目的 utils 下新建 monitorZoom.js 文件

export const monitorZoom = () => {


  let ratio = 0,


    screen = window.screen,


    ua = navigator.userAgent.toLowerCase();


  if (window.devicePixelRatio !== undefined) {


    ratio = window.devicePixelRatio;


  } else if (~ua.indexOf("msie")) {


    if (screen.deviceXDPI && screen.logicalXDPI) {


      ratio = screen.deviceXDPI / screen.logicalXDPI;


    }


  } else if (


    window.outerWidth !== undefined &&


    window.innerWidth !== undefined


  ) {


    ratio = window.outerWidth / window.innerWidth;


  }


  if (ratio) {


    ratio = Math.round(ratio * 100);


  }


  return ratio;


};

在main.js 中引入并使用即可

import { monitorZoom } from "@/utils/monitorZoom.js";


const m = monitorZoom();


if (window.screen.width * window.devicePixelRatio >= 3840) {


  document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时


} else {


  document.body.style.zoom = 100 / Number(m);


}

完整代码

import Vue from "vue";


import App from "./App.vue";


import router from "./router";


/* 调整缩放比例 start */


import { monitorZoom } from "@/utils/monitorZoom.js";


const m = monitorZoom();


if (window.screen.width * window.devicePixelRatio >= 3840) {


  document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时


} else {


  document.body.style.zoom = 100 / Number(m);


}


/* 调整缩放比例 end */


Vue.config.productionTip = false;


new Vue({


  router,


  render: (h) => h(App),


}).$mount("#app");

获取屏幕的分辨率

获取屏幕的宽：

window.screen.width * window.devicePixelRatio

获取屏幕的高：

window.screen.height * window.devicePixelRatio

移动端适配（使用 postcss-px-to-viewport 插件）

npm install postcss-px-to-viewport --save-dev

或者

yarn add -D postcss-px-to-viewport

配置适配插件的参数（在项目根目录创建 .postcssrc.js 文件[与 src 目录平级]）粘贴以下代码即可

module.exports = {


  plugins: {


    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等


    "postcss-px-to-viewport": {


      unitToConvert: "px", // 需要转换的单位，默认为"px"


      viewportWidth: 390, // UI设计稿的宽度


      unitPrecision: 6, // 转换后的精度，即小数点位数


      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换


      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw


      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw


      selectorBlackList: ["wrap"], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位


      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换


      mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false


      replace: true, // 是否直接更换属性值，而不添加备用属性


      exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，用正则做目录名匹配，例如 'node_modules' 下的文件


      landscape: false, // 是否处理横屏情况


      landscapeUnit: "vw", // 横屏时使用的视窗单位，默认vw


      landscapeWidth: 2048 // 横屏时使用的视口宽度


    }


  }


};

感谢各位的阅读，以上就是“vue能不能实现自适应”的内容了，经过本文的学习后，相信大家对vue能不能实现自适应这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是***，小编将为大家推送更多相关知识点的文章，欢迎关注！