關(guān)于移動端與大屏幕自適應(yīng)適配方案
更新時間：2022年10月19日 11:11:03 作者：大橘為重¨
這篇文章主要介紹了關(guān)于移動端與大屏幕自適應(yīng)適配方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
一、安裝并配置相應(yīng)插件
1.安裝lib-flexible與postcss-pxtorem
使用npm下載包
注：下載 postcss 版本為5.1.1(其它版本可能會出現(xiàn)報錯)
npm i lib-flexible? npm i postcss-pxtorem@5.1.1
2.配置lib-flexible與postcss-pxtorem
配置 postcss-pxtorem 設(shè)置頁面px自動轉(zhuǎn)換為rem
創(chuàng)建vue.config.js文件，添加如下配置：
//vue.config.js
const pxtorem = require('postcss-pxtorem')
module.exports = {
? ? css: {
? ? ? ? loaderOptions: {
? ? ? ? ? ? postcss: {
? ? ? ? ? ? ? ? plugins: [
? ? ? ? ? ? ? ? ? ? pxtorem({
? ? ? ? ? ? ? ? ? ? ? ? rootValue: 80, ?//這里設(shè)置參考"設(shè)計(jì)稿大小"和自己認(rèn)為"合適的劃分比例"（例：1920/24 = 80)
? ? ? ? ? ? ? ? ? ? ? ? propList: ['*'],
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? }
? ? }
}注：該插件可以把組件庫的px也轉(zhuǎn)化為rem
按需修改 lib-flexible 源碼配置
在 main.js 引入 lib-flexible
import 'lib-flexible'
修改"node_modules\lib-flexible\flexible.js"下源碼配置
function refreshRem(){
? ? var width = docEl.getBoundingClientRect().width;
? ? //這里代表適配744~5760寬度的屏幕視圖，可以按需修改
? ? if (width / dpr < 744) {
? ? ? ? width = 744 * dpr;
? ? } else if (width / dpr > 5760) {
? ? ? ? width = 5760 * dpr;
? ? }
? ? //這里width的相除值需要和前面vue.config.js文件下rootValue的相除值相同
? ? var rem = width / 24;
? ? docEl.style.fontSize = rem + 'px';
? ? flexible.rem = win.rem = rem;
}效果：
二、設(shè)置移動端適配
這里主要講將pc端頁面等比縮放到移動端顯示，并且支持移動端用戶對頁面進(jìn)行放大和縮小查看
于 src 下新建 utils 文件在其中創(chuàng)建 adaptive.config.js文件
編寫如下代碼：
import { onMounted } from "vue";
// 判斷客戶端設(shè)備
const _isMobile = () => {
? ? let flag = navigator.userAgent.match(
? ? ? ? /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
? ? );
? ? return flag;
};
// "移動端"手動添加 mate 標(biāo)簽函數(shù)
const addMeta = (name, content) => {
? ? const meta = document.createElement("meta");
? ? meta.content = content;
? ? meta.name = name;
? ? document.getElementsByTagName("head")[0].appendChild(meta);
};
// 渲染頁面配置 mate 標(biāo)簽?
export default function adaptive() {
? ? onMounted(() => {
? ? ? ? if (_isMobile()) {
? ? ? ? ? ? console.log("手機(jī)");
? ? ? ? ? ? addMeta("viewport", "user-scalable=yes");
? ? ? ? } else {
? ? ? ? ? ? console.log("pc");
? ? ? ? }
? ? });
}在 App.vue 下導(dǎo)入使用：
<script>
import adaptive from './utils/adaptive.config';
export default {
? setup() {
? ? adaptive()
? },
}
</script>
注：如果直接修改html上meta標(biāo)簽屬性可能是影響到 lib-flexible 的原因會出現(xiàn)移動端無法等比縮放的問題出現(xiàn)，故用此方法移動端下動態(tài)修改meta標(biāo)簽。
三、注意問題
- element有些組件會有內(nèi)聯(lián)樣式，postcss-pxtorem無法使內(nèi)聯(lián)樣式由px轉(zhuǎn)換為rem
- 這里建議自己注意一下在組件的屬性值設(shè)置并自行修改，或者用媒體查詢進(jìn)行組件樣式修改
例如：
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue項(xiàng)目的構(gòu)建，打包，發(fā)布全過程
小編給大家通過本文詳細(xì)介紹了關(guān)于vue.js項(xiàng)目的構(gòu)建、打包、發(fā)布的全過程，文章很以后價值，值得你參考。2017-11-11
vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格
這篇文章主要介紹了vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue-admin-template模板添加tagsview的實(shí)現(xiàn)
本文主要介紹了vue-admin-template模板添加tagsview的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了一篇文章帶你徹底搞懂VUE響應(yīng)式原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可任意參考一下,需要的朋友可以參考下2022-06-06
使用Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細(xì)過程
這篇文章主要介紹了Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細(xì)過程，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02
在vue2中提供了.sync修飾符,但是在vue3中不再支持.sync,取而代之的是v-model,本文給大家介紹在Vue2中v-model和.sync區(qū)別,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue3新增時自動獲取當(dāng)前時間的操作方法,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了使用異步組件優(yōu)化Vue應(yīng)用程序的性能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
本文主要介紹了vue前端導(dǎo)出多級表頭的excel表的示例代碼,可以使用xlsx庫來創(chuàng)建Excel文件,下面就來具體介紹一下,感興趣的可以了解一下2024-06-06
頁面內(nèi)容太多會導(dǎo)致加載速度過慢,這時可考慮使用滾動加載即還沒有出現(xiàn)在可視范圍內(nèi)的內(nèi)容塊先不加載,出現(xiàn)后再加載,所以本文給大家介紹了基于vue實(shí)現(xiàn)頁面滾動加載的示例,需要的朋友可以參考下2024-01-01