關(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è)計稿大小"和自己認為"合適的劃分比例"(例: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端頁面等比縮放到移動端顯示,并且支持移動端用戶對頁面進行放大和縮小查看
于 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 標簽函數(shù) const addMeta = (name, content) => { ? ? const meta = document.createElement("meta"); ? ? meta.content = content; ? ? meta.name = name; ? ? document.getElementsByTagName("head")[0].appendChild(meta); }; // 渲染頁面配置 mate 標簽? export default function adaptive() { ? ? onMounted(() => { ? ? ? ? if (_isMobile()) { ? ? ? ? ? ? console.log("手機"); ? ? ? ? ? ? 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標簽屬性可能是影響到 lib-flexible 的原因會出現(xiàn)移動端無法等比縮放的問題出現(xiàn),故用此方法移動端下動態(tài)修改meta標簽。
三、注意問題
- element有些組件會有內(nèi)聯(lián)樣式,postcss-pxtorem無法使內(nèi)聯(lián)樣式由px轉(zhuǎn)換為rem
- 這里建議自己注意一下在組件的屬性值設(shè)置并自行修改,或者用媒體查詢進行組件樣式修改
例如:
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3.0+element Plus實現(xiàn)頁面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能
這篇文章主要介紹了vue3.0+element Plus實現(xiàn)頁面布局,側(cè)邊欄菜單路由跳轉(zhuǎn),需要的朋友可以參考下2023-07-07ElementPlus組件與圖標按需自動引入的實現(xiàn)方法
這篇文章主要介紹了ElementPlus組件與圖標按需自動引入的實現(xiàn)方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06關(guān)于配置babel-plugin-import報錯的坑及解決
這篇文章主要介紹了關(guān)于配置babel-plugin-import報錯的坑及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12解決VUE打包后與nginx代理出現(xiàn)加載速度超級慢的問題
這篇文章主要介紹了解決VUE打包后與nginx代理出現(xiàn)加載速度超級慢的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09