vue開(kāi)發(fā)頁(yè)面自適應(yīng)屏幕尺寸的實(shí)例代碼
vue開(kāi)發(fā)頁(yè)面自適應(yīng)屏幕尺寸
1.概述
使用vue開(kāi)發(fā)的頁(yè)面都是通過(guò)px設(shè)置它的尺寸，如果換了一個(gè)不同尺寸的屏幕就會(huì)出現(xiàn)頁(yè)面排版錯(cuò)亂，顯示不完整等情況。下面通過(guò)插件將px裝換為rem單位適應(yīng)不同尺寸的屏幕。
2.網(wǎng)頁(yè)適配屏幕尺寸
2.1.安裝插件
lib-flexible插件作用是根據(jù)rem調(diào)整頁(yè)面寬高，自適應(yīng)屏幕尺寸
px2rem-loader插件作用是將px單位轉(zhuǎn)換為rem單位，lib-flexible插件才能根據(jù)rem調(diào)整網(wǎng)頁(yè)寬高尺寸。
# 安裝lib-flexible插件 yarn add lib-flexible # 安裝px2rem-loader插件 -D 安裝到開(kāi)發(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)頁(yè)的內(nèi)容能夠隨著頁(yè)面大小而改變。
到此這篇關(guān)于vue開(kāi)發(fā)頁(yè)面自適應(yīng)屏幕尺寸的文章就介紹到這了,更多相關(guān)vue頁(yè)面自適應(yīng)屏幕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue router-link下劃線和顏色問(wèn)題及解決
這篇文章主要介紹了vue router-link下劃線和顏色問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了解決Vue固定滾動(dòng)位置的處理辦法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
VUE中this.$router.push點(diǎn)了后hash地址改變了頁(yè)面不跳轉(zhuǎn)
本文主要介紹了VUE中this.$router.push點(diǎn)了后hash地址改變了頁(yè)面不跳轉(zhuǎn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
Vue項(xiàng)目全局配置頁(yè)面緩存之按需讀取緩存的實(shí)現(xiàn)詳解
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目全局配置頁(yè)面緩存之實(shí)現(xiàn)按需讀取緩存的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧2018-08-08
使用vue如何構(gòu)建一個(gè)自動(dòng)建站項(xiàng)目
這篇文章主要介紹了使用vue如何構(gòu)建一個(gè)自動(dòng)建站項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了vue實(shí)現(xiàn)跨域的方法,結(jié)合實(shí)例形式分析了vue.js跨域的原理與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
vue任意關(guān)系組件通信與跨組件監(jiān)聽(tīng)狀態(tài)vue-communication
這篇文章主要介紹了vue任意關(guān)系組件通信與跨組件監(jiān)聽(tīng)狀態(tài)vue-communication，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
el-menu遞歸實(shí)現(xiàn)多級(jí)菜單組件的示例
本文主要介紹了el-menu使用遞歸組件實(shí)現(xiàn)多級(jí)菜單組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
關(guān)于delete和Vue.delete的區(qū)別及說(shuō)明
這篇文章主要介紹了關(guān)于delete和Vue.delete的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue中關(guān)閉當(dāng)前頁(yè)面的方法與原生JavaScript類似,都是通過(guò)window對(duì)象的close方法實(shí)現(xiàn),這篇文章主要介紹了Vue關(guān)閉當(dāng)前頁(yè)面的方法,需要的朋友可以參考下2023-09-09