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

使用方法：

1. <template>
2. <div>
3. <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">
4. <router-view />
5. </scale-box>
6. </div>
7. </template>
9. <script>
10. import ScaleBox from "vue2-scale-box";
12. export default {
13. components: { ScaleBox },
14. };
15. </script>
17. <style lang="scss">
18. body {
19. margin: 0;
20. padding: 0;
21. background: url("@/assets/bg.jpg");
22. }
23. </style>

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

npm install vue3-scale-box

或者

yarn add vue3-scale-box

使用方法：

1. <template>
2. <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
3. <router-view />
4. </ScaleBox>
5. </template>
7. <script>
8. import ScaleBox from "vue3-scale-box";
9. </script>
11. <style lang="scss">
12. body {
13. margin: 0;
14. padding: 0;
15. background: url("@/assets/bg.jpg");
16. }
17. </style>

方案二：设置设备像素比例（设备像素比）

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

1. class devicePixelRatio {
2. /* 获取系统类型 */
3. getSystem() {
4. const agent = navigator.userAgent.toLowerCase();
5. const isMac = /macintosh|mac os x/i.test(navigator.userAgent);
6. if (isMac) return false;
7. // 目前只针对 win 处理，其它系统暂无该情况，需要则继续在此添加即可
8. if (agent.indexOf("windows") >= 0) return true;
9. }
10. /* 监听方法兼容写法 */
11. addHandler(element, type, handler) {
12. if (element.addEventListener) {
13. element.addEventListener(type, handler, false);
14. } else if (element.attachEvent) {
15. element.attachEvent("on" + type, handler);
16. } else {
17. element["on" + type] = handler;
18. }
19. }
20. /* 校正浏览器缩放比例 */
21. correct() {
22. // 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化
23. document.getElementsByTagName("body")[0].style.zoom =
24. 1 / window.devicePixelRatio;
25. }
26. /* 监听页面缩放 */
27. watch() {
28. const that = this;
29. // 注意: 这个方法是解决全局有两个window.resize
30. that.addHandler(window, "resize", function () {
31. that.correct(); // 重新校正浏览器缩放比例
32. });
33. }
34. /* 初始化页面比例 */
35. init() {
36. const that = this;
37. // 判断设备，只在 win 系统下校正浏览器缩放比例
38. if (that.getSystem()) {
39. that.correct(); // 校正浏览器缩放比例
40. that.watch(); // 监听页面缩放
41. }
42. }
43. }
44. export default devicePixelRatio;

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

1. <template>
2. <div>
3. <router-view />
4. </div>
5. </template>
7. <script>
8. import devPixelRatio from "@/utils/devicePixelRatio.js";
10. export default {
11. created() {
12. new devPixelRatio().init(); // 初始化页面比例
13. },
14. };
15. </script>
17. <style lang="scss">
18. body {
19. margin: 0;
20. padding: 0;
21. }
22. </style>

方案三：通过 JS 设置 zoom 属性调整缩放比例

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

1. export const monitorZoom = () => {
2. let ratio = 0,
3. screen = window.screen,
4. ua = navigator.userAgent.toLowerCase();
5. if (window.devicePixelRatio !== undefined) {
6. ratio = window.devicePixelRatio;
7. } else if (~ua.indexOf("msie")) {
8. if (screen.deviceXDPI && screen.logicalXDPI) {
9. ratio = screen.deviceXDPI / screen.logicalXDPI;
10. }
11. } else if (
12. window.outerWidth !== undefined &&
13. window.innerWidth !== undefined
14. ) {
15. ratio = window.outerWidth / window.innerWidth;
16. }
17. if (ratio) {
18. ratio = Math.round(ratio * 100);
19. }
20. return ratio;
21. };

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

1. import { monitorZoom } from "@/utils/monitorZoom.js";
2. const m = monitorZoom();
3. if (window.screen.width * window.devicePixelRatio >= 3840) {
4. document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
5. } else {
6. document.body.style.zoom = 100 / Number(m);
7. }

完整代码

1. import Vue from "vue";
2. import App from "./App.vue";
3. import router from "./router";
5. /* 调整缩放比例 start */
6. import { monitorZoom } from "@/utils/monitorZoom.js";
7. const m = monitorZoom();
8. if (window.screen.width * window.devicePixelRatio >= 3840) {
9. document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
10. } else {
11. document.body.style.zoom = 100 / Number(m);
12. }
13. /* 调整缩放比例 end */
15. Vue.config.productionTip = false;
17. new Vue({
18. router,
19. render: (h) => h(App),
20. }).$mount("#app");

获取屏幕的分辨率

获取屏幕的宽：

window.screen.width * window.devicePixelRatio

获取屏幕的高：

window.screen.height * window.devicePixelRatio

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

官网：https://github.com/evrone/postcss-px-to-viewport

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

或者

yarn add -D postcss-px-to-viewport

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

1. module.exports = {
2. plugins: {
3. autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
4. "postcss-px-to-viewport": {
5. unitToConvert: "px", // 需要转换的单位，默认为"px"
6. viewportWidth: 390, // UI设计稿的宽度
7. unitPrecision: 6, // 转换后的精度，即小数点位数
8. propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
9. viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
10. fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
11. selectorBlackList: ["wrap"], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位
12. minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
13. mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
14. replace: true, // 是否直接更换属性值，而不添加备用属性
15. exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，用正则做目录名匹配，例如 'node_modules' 下的文件
16. landscape: false, // 是否处理横屏情况
17. landscapeUnit: "vw", // 横屏时使用的视窗单位，默认vw
18. landscapeWidth: 2048 // 横屏时使用的视口宽度
19. }
20. }
21. };