vue開發頁面自適應屏幕尺寸的實例代碼

使用vue開發的頁面都是通過px設置它的尺寸，如果換了一個不同尺寸的屏幕就會出現頁面排版錯亂，顯示不完整等情況，下面通過插件將px裝換為rem單位適應不同尺寸的屏幕,需要的朋友可以參考下!

vue開發頁面自適應屏幕尺寸

1.概述

使用vue開發的頁面都是通過px設置它的尺寸，如果換了一個不同尺寸的屏幕就會出現頁面排版錯亂，顯示不完整等情況。下面通過插件將px裝換為rem單位適應不同尺寸的屏幕。

2.網頁適配屏幕尺寸

2.1.安裝插件

lib-flexible插件作用是根據rem調整頁面寬高，自適應屏幕尺寸px2rem-loader插件作用是將px單位轉換為rem單位，lib-flexible插件才能根據rem調整網頁寬高尺寸。

# 安裝lib-flexible插件yarn add lib-flexible# 安裝px2rem-loader插件 -D 安裝到開發環境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"// UIimport 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({  // 設置px轉化為rem比例，設計稿大小為1920，比例 1920/ 10remUnit: 192  });  },}

3.修改flexible.js

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

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

重啟服務，改變瀏覽器大小網頁的內容能夠隨著頁面大小而改變。

聲明:本站部分文章轉載自網路，其言論僅代表作者觀點，不代表本站立場，如需轉載請保留出處和鏈接！