欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(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è)計稿大小"和自己認為"合適的劃分比例"(例: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)文章

  • js 實現(xiàn)拖拽排序詳情

    js 實現(xiàn)拖拽排序詳情

    這篇文章主要介紹了js 實現(xiàn)拖拽排序,拖拽排序?qū)τ谛』锇閭儊碚f應(yīng)該不陌生,平時工作的時候,可能會選擇使用類似Sortable.js這樣的開源庫來實現(xiàn)需求。但在完成需求后,大家有沒有沒想過拖拽排序是如何實現(xiàn)的呢?感興趣得話一起來看看下面文章得小心內(nèi)容吧
    2021-11-11
  • vue中使用svg-icon遇到的坑及解決

    vue中使用svg-icon遇到的坑及解決

    這篇文章主要介紹了vue中使用svg-icon遇到的坑及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue3.0+element Plus實現(xiàn)頁面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能

    vue3.0+element Plus實現(xiàn)頁面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能

    這篇文章主要介紹了vue3.0+element Plus實現(xiàn)頁面布局,側(cè)邊欄菜單路由跳轉(zhuǎn),需要的朋友可以參考下
    2023-07-07
  • 淺談使用Vue完成移動端apk項目

    淺談使用Vue完成移動端apk項目

    這幾天,我做了一個vue移動端的小項目,本文主要介紹了Vue移動端apk項目,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • 使用vue2.0創(chuàng)建的項目的步驟方法

    使用vue2.0創(chuàng)建的項目的步驟方法

    這篇文章主要介紹了使用vue2.0創(chuàng)建的項目的步驟方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • ElementPlus組件與圖標按需自動引入的實現(xiàn)方法

    ElementPlus組件與圖標按需自動引入的實現(xiàn)方法

    這篇文章主要介紹了ElementPlus組件與圖標按需自動引入的實現(xiàn)方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2024-06-06
  • 關(guān)于配置babel-plugin-import報錯的坑及解決

    關(guān)于配置babel-plugin-import報錯的坑及解決

    這篇文章主要介紹了關(guān)于配置babel-plugin-import報錯的坑及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • element-ui 本地化使用教程詳解

    element-ui 本地化使用教程詳解

    這篇文章主要介紹了element-ui 本地化使用教程詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • 解決VUE打包后與nginx代理出現(xiàn)加載速度超級慢的問題

    解決VUE打包后與nginx代理出現(xiàn)加載速度超級慢的問題

    這篇文章主要介紹了解決VUE打包后與nginx代理出現(xiàn)加載速度超級慢的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • Vue2+JS實現(xiàn)掃雷小游戲

    Vue2+JS實現(xiàn)掃雷小游戲

    實現(xiàn)小游戲可以鍛煉自己的邏輯思維能力,也不會很枯燥,完成時會給自己帶來一種滿足感。本文就將利用Vue和JS實現(xiàn)簡單的掃雷小游戲,需要的可以參考一下
    2022-06-06

最新評論