快捷導(dǎo)航

vue開發(fā)頁面自適應(yīng)屏幕尺寸的實(shí)例代碼

更新時(shí)間：2022年12月01日 16:32:44 作者：Bruce小鬼

使用vue開發(fā)的頁面都是通過px設(shè)置它的尺寸，如果換了一個(gè)不同尺寸的屏幕就會(huì)出現(xiàn)頁面排版錯(cuò)亂，顯示不完整等情況，下面通過插件將px裝換為rem單位適應(yīng)不同尺寸的屏幕,需要的朋友可以參考下

vue開發(fā)頁面自適應(yīng)屏幕尺寸

1.概述

使用vue開發(fā)的頁面都是通過px設(shè)置它的尺寸，如果換了一個(gè)不同尺寸的屏幕就會(huì)出現(xiàn)頁面排版錯(cuò)亂，顯示不完整等情況。下面通過插件將px裝換為rem單位適應(yīng)不同尺寸的屏幕。

2.網(wǎng)頁適配屏幕尺寸

2.1.安裝插件

lib-flexible插件作用是根據(jù)rem調(diào)整頁面寬高，自適應(yīng)屏幕尺寸
px2rem-loader插件作用是將px單位轉(zhuǎn)換為rem單位，lib-flexible插件才能根據(jù)rem調(diào)整網(wǎng)頁寬高尺寸。

# 安裝lib-flexible插件
yarn add lib-flexible
# 安裝px2rem-loader插件 -D 安裝到開發(fā)環(huán)境
yarn add -D px2rem-loader

2.2.配置插件

1.在main.js文件中引用lib-flexible插件

import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
import "@/assets/scss/reset.scss"
import axios from "axios"
// UI
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

// tools
// 引用lib-flexible插件
import "lib-flexible"

2.在vue.config.js中配置px2rem-loader

module.exports = {
  configureWebpack: {
    // webpack 配置
    output: {
      filename: ,
      chunkFilename: `,
    },
  },
  // 配置px2rem-loader
  chainWebpack: config => {
    config.module
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .resourceQuery(/\?vue/)
      .use("px2rem")
      .loader("px2rem-loader")
      .options({
      // 設(shè)置px轉(zhuǎn)化為rem比例，設(shè)計(jì)稿大小為1920，比例 1920/ 10
        remUnit: 192
      });
  },
}

3.修改flexible.js

全局搜索flexible.js，將refreshRem函數(shù)中原本的540替換為width，這樣就實(shí)現(xiàn)了寬度根據(jù)屏幕大小自動(dòng)適配.
或者在下面的路徑找到該文件：node_modules/lib-flexible/flexible.js

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
        	// 將width = 540 * dpr; 540改為width
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

重啟服務(wù)，改變?yōu)g覽器大小網(wǎng)頁的內(nèi)容能夠隨著頁面大小而改變。

到此這篇關(guān)于vue開發(fā)頁面自適應(yīng)屏幕尺寸的文章就介紹到這了,更多相關(guān)vue頁面自適應(yīng)屏幕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: