vue適配屏幕分辨率,以及屏幕的縮放方式

更新時間：2025年04月24日 09:55:53 作者：weixin_54820790

這篇文章主要介紹了vue適配屏幕分辨率,以及屏幕的縮放方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue適配屏幕分辨率以及屏幕的縮放

utils新建一個文件devicePixelRatio.js

class DisplayAdapter {
    constructor(options = {}) {
        this.options = {
            designWidth: 1920,       // 設計稿基準寬度
            baseFontSize: 16,        // 基礎字體大小
            maxScale: 2,             // 最大縮放比例
            useTransform: true,      // 使用transform縮放
            debounceTime: 100,       // 防抖時間
            ...options
        };

        this.lastDPR = window.devicePixelRatio;
        this.init();
    }

    // 系統(tǒng)檢測（增強版）
    _getSystem () {
        const agent = navigator.userAgent.toLowerCase();
        const isWindows = /windows/.test(agent);
        const isHighDPI = window.devicePixelRatio >= 1.25;
        return isWindows && isHighDPI;
    }

    // 防抖函數(shù)
    _debounce (fn) {
        let timer;
        return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, args), this.options.debounceTime);
        };
    }

    // 動態(tài)REM計算
    _setRem () {
        const clientWidth = document.documentElement.clientWidth;
        const scale = Math.min(clientWidth / this.options.designWidth, this.options.maxScale);
        document.documentElement.style.fontSize =
            `${this.options.baseFontSize * scale}px`;
    }

    // DPI縮放校正
    _correctDPR () {
        const currentDPR = window.devicePixelRatio;
        if (Math.abs(currentDPR - this.lastDPR) > 0.05) {
            this.lastDPR = currentDPR;

            if (this.options.useTransform) {
                const scale = 1 / currentDPR;
                document.body.style.transform = `scale(${scale})`;
                document.body.style.transformOrigin = 'top left';
                document.body.style.width = `${this.options.designWidth / scale}px`;
            } else {
                document.body.style.zoom = 1 / currentDPR;
            }
        }
    }

    // 組合適配方法
    _adaptLayout () {
        this._correctDPR();
        this._setRem();
    }

    // 事件監(jiān)聽
    _watch () {
        const debouncedAdapt = this._debounce(() => this._adaptLayout());
        const events = ['resize', 'pageshow', 'orientationchange'];

        events.forEach(event => {
            window.addEventListener(event, debouncedAdapt);
        });

        // 監(jiān)聽DPI變化（僅現(xiàn)代瀏覽器）
        if (window.matchMedia) {
            window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
                .addEventListener('change', debouncedAdapt);
        }
    }

    // 初始化樣式
    _injectBaseStyles () {
        const style = document.createElement('style');
        style.textContent = `
        html {
          overflow: hidden;
          width: 100vw;
          height: 100vh;
        }
        body {
          position: relative;
          margin: 0;
          padding: 0;
          overflow: hidden;
          transform-origin: top left;
        }
      `;
        document.head.appendChild(style);
    }

    // 初始化
    init () {
        if (this._getSystem()) {
            this._injectBaseStyles();
            this._adaptLayout();
            this._watch();
        } else {
            // 非Windows系統(tǒng)僅啟用REM適配
            this._setRem();
            window.addEventListener('resize', this._debounce(() => this._setRem()));
        }
    }
}

// 初始化配置
new DisplayAdapter({
    designWidth: 1920,
    useTransform: true,
    maxScale: 1.5
});

export default DisplayAdapter;

在app.vue里面使用

import DevicePixelRatio from "@/utils/devicePixelRatio"

 created () {
    new DevicePixelRatio().init()
}

utils里面再新建一個rem.js

// rem等比適配配置文件
// 基準大小
const baseSize = 16;
// 設置 rem 函數(shù)
function setRem () {
    // 當前頁面寬度相對于 1920寬的縮放比例，可根據(jù)自己需要修改。
    const scale = document.documentElement.clientWidth / 1920;
    // 設置頁面根節(jié)點字體大?。ā癕ath.min(scale, 2)” 指最高放大比例為2，可根據(jù)實際業(yè)務需求調(diào)整）
    if (document.documentElement.clientWidth >= 2560) {
        document.documentElement.style.fontSize =
            baseSize * Math.min(scale, 2) + "px";
    } else {
        document.documentElement.style.fontSize =
            baseSize * Math.min(scale, 1) + "px";
    }

}
// 初始化
setRem();
// 改變窗口大小時重新設置 rem
// window.onresize = function () {
//     setRem();
// };
window.addEventListener('resize', function () {
    setRem();
});

main.js中引用

import rem from "@/utils/rem";

vue.config.js里面修改

 // 引入等比適配插件
const px2rem = require('postcss-px2rem');

// 配置基本大小
const postcss = px2rem({
    // 基準大小 baseSize，需要和rem.js中相同
    remUnit: 16,
});
 
// 配置基本大小
const postcss = px2rem({
  // 基準大小 baseSize，需要和rem.js中相同
  // remUnit: 14 代表 1rem = 14px; 所以當你一個14px值時，它會自動轉(zhuǎn)成 (14px/14)rem
  remUnit: 14
})
 
// 使用等比適配插件
module.exports = {
  lintOnSave: true,
  css: {
        loaderOptions: {
            scss: {
                additionalData: `@import "./src/assets/styles/module.scss";`,
                sassOptions: { outputStyle: "expanded" },
            },
            postcss: {
                plugins: [
                    postcss,
                ],
            },
        },
    },
}

與vue.config.js同根目錄下創(chuàng)建postcss.config.js

// module.exports = {
//     plugins: {
//         'postcss-px-to-viewport': {
//             // 設計稿寬度是電腦屏幕寬度

//             unitToConvert: 'px',  // 需要轉(zhuǎn)換的單位，默認為"px"
//             viewportWidth: 1920, //  設計稿的視口寬度
//             unitPrecision: 5, // 單位轉(zhuǎn)換后保留的精度
//             propList: ['*'], // 能轉(zhuǎn)化為vw的屬性列表
//             viewportUnit: 'vw', //  希望使用的視口單位
//             fontViewportUnit: 'vw', // 字體使用的視口單位
//             selectorBlackList: [], // 需要忽略的CSS選擇器
//             minPixelValue: 1, // 最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會被轉(zhuǎn)換
//             mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位
//             replace: true, // 是否直接更換屬性值，而不添加備用屬性
//             exclude: [], // 忽略某些文件夾下的文件或特定文件
//             include: undefined,  // 如果設置了include，那將只有匹配到的文件才會被轉(zhuǎn)換，例如只轉(zhuǎn)換 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
//             landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
//             landscapeUnit: 'vw' // 橫屏時使用的單位
//         },
//     },
// };
// module.exports = () => ({
//     plugins: [
//         require("autoprefixer")(),
//         // require("postcss-px2rem")({ remUnit: 75 })
//         require("postcss-pxtorem")({
//             rootValue: 16,//結(jié)果為：設計稿元素尺寸/16，比如元素寬320px,最終頁面會換算成 20rem
//             propList: ["*"]
//         })
//     ]
// })

//另一種可以新建postcss.config.js，寫入如下代碼
module.exports = {
    plugins: {
        // 兼容瀏覽器，添加前綴
        autoprefixer: {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8",
                "last 10 versions", // 所有主流瀏覽器最近10版本用
            ],
            grid: true,
        },
        "postcss-px2rem": {
            rootValue: 16, //結(jié)果為：設計稿元素尺寸/16，比如元素寬320px,最終頁面會換算成 20rem
            propList: ["*"], //是一個存儲哪些將被轉(zhuǎn)換的屬性列表，這里設置為['*']全部，假設需要僅對邊框進行設置，可以寫['*', '!border*']
            unitPrecision: 5, //保留rem小數(shù)點多少位
            //selectorBlackList: ['.radius'],  //則是一個對css選擇器進行過濾的數(shù)組，比如你設置為['fs']，那例如fs-xl類名，里面有關px的樣式將不被轉(zhuǎn)換，這里也支持正則寫法。
            replace: true, //這個真不知到干嘛用的。有知道的告訴我一下
            mediaQuery: false, //媒體查詢( @media screen 之類的)中不生效
            minPixelValue: 12, //px小于12的不會被轉(zhuǎn)換
        },
    },
};

  // 藍湖上設計稿自定義為375px 測量值直接寫入即可 若設計稿為750px 則rootValue: 32