快捷導(dǎo)航

Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法詳解

更新時(shí)間：2024年03月26日 16:48:11 作者：晚生隆海

這篇文章主要為大家詳細(xì)介紹了Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

甲方爸爸之前的需要只是要PC端訪問(wèn)，沒(méi)有做不同屏幕的自適應(yīng)尺寸，這個(gè)年代誰(shuí)的屏幕沒(méi)有1980.然后經(jīng)過(guò)幾個(gè)月的頁(yè)面修改好現(xiàn)在需要適應(yīng)各式各樣的屏幕，做自適應(yīng)。關(guān)鍵項(xiàng)目寫(xiě)完了，一個(gè)個(gè)改費(fèi)時(shí)費(fèi)心費(fèi)力。經(jīng)過(guò)不段的探索有兩個(gè)方案可行，一個(gè)方案有個(gè)bug，一個(gè)完美適配

方案一

1.安裝npm i lib-flexible --save npm install postcss-pxtorem -D lib-flexible庫(kù)的新版本：github.com/amfe/lib-fl…

2.在項(xiàng)目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

3.在項(xiàng)目根目錄的index.html 頭部刪除自動(dòng)生成的meta標(biāo)簽, lib-flexible會(huì)根據(jù)屏幕自動(dòng)生成相對(duì)于的meta標(biāo)簽

// 刪除
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.在項(xiàng)目根新建postcss.config.js

//另一種可以新建postcss.config.js，寫(xiě)入如下代碼
module.exports = {
  plugins: {
    // 兼容瀏覽器，添加前綴
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流瀏覽器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      rootValue: 16, //結(jié)果為：設(shè)計(jì)稿元素尺寸/16，比如元素寬320px,最終頁(yè)面會(huì)換算成 20rem
      propList: ["*"], //是一個(gè)存儲(chǔ)哪些將被轉(zhuǎn)換的屬性列表，這里設(shè)置為['*']全部，假設(shè)需要僅對(duì)邊框進(jìn)行設(shè)置，可以寫(xiě)['*', '!border*']
      unitPrecision: 5, //保留rem小數(shù)點(diǎn)多少位
      //selectorBlackList: ['.radius'],  //則是一個(gè)對(duì)css選擇器進(jìn)行過(guò)濾的數(shù)組，比如你設(shè)置為['fs']，那例如fs-xl類(lèi)名，里面有關(guān)px的樣式將不被轉(zhuǎn)換，這里也支持正則寫(xiě)法。
      replace: true, //這個(gè)真不知到干嘛用的。有知道的告訴我一下
      mediaQuery: false, //媒體查詢( @media screen 之類(lèi)的)中不生效
      minPixelValue: 12, //px小于12的不會(huì)被轉(zhuǎn)換
    },
  },
};

// 藍(lán)湖上設(shè)計(jì)稿自定義為375px 測(cè)量值直接寫(xiě)入即可 若設(shè)計(jì)稿為750px 則rootValue: 32

在vue.config.js內(nèi)配置

 // 配置pc端適配
    css: {
        loaderOptions: {
          postcss: {
              postcssOptions: { #加上此配置，網(wǎng)上很多是沒(méi)有，運(yùn)行會(huì)報(bào)錯(cuò)
                plugins: [
                  require('postcss-pxtorem')({
                    rootValue : 16, // 換算的基數(shù)
                    minPixelValue: 2,
                    selectorBlackList  : [], // 忽略轉(zhuǎn)換正則匹配項(xiàng) 列入一些ui庫(kù), ['.el'] 就是忽略elementUI庫(kù)
                    propList   : ['*'],
                  }),
                ]
              }
            }
        }
    }

此方案不打開(kāi)控制臺(tái)或不改變?yōu)g覽器的顯示區(qū)域?qū)捀?，?huì)自動(dòng)把html的fontsize改變?cè)斐蓸邮阶兓?，每次都要手?dòng)刷新下才正常，此bug暫時(shí)沒(méi)找到解決方法，感覺(jué)不是很好。

方案二（完美解決）

1.在自己項(xiàng)目utils下新建rem.js文件

// rem等比適配配置文件
// 基準(zhǔn)大小
const baseSize = 16
// 設(shè)置 rem 函數(shù)
function setRem () {
  // 當(dāng)前頁(yè)面屏幕分辨率相對(duì)于 1920寬的縮放比例，可根據(jù)自己需要修改
  const scale = document.documentElement.clientWidth / 1920
  // 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大小（“Math.min(scale, 2)” 指最高放大比例為2，可根據(jù)實(shí)際業(yè)務(wù)需求調(diào)整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
  setRem()
}

2.在main.js中引入適配文件

import '@/utils/rem.js'

3.安裝postcss-pxtorem

npm i postcss-pxtorem

如果有報(bào)錯(cuò)版本太高可以試下低版本

npm i postcss-pxtorem@5.1.1 -D

在vue.config.js內(nèi)配置

 // 配置pc端適配
    css: {
        loaderOptions: {
          postcss: {
              postcssOptions: { #加上此配置，網(wǎng)上很多是沒(méi)有，運(yùn)行會(huì)報(bào)錯(cuò)
                plugins: [
                  require('postcss-pxtorem')({
                    rootValue : 16, // 換算的基數(shù)
                    minPixelValue: 2,
                    selectorBlackList  : [], // 忽略轉(zhuǎn)換正則匹配項(xiàng) 列入一些ui庫(kù), ['.el'] 就是忽略elementUI庫(kù)
                    propList   : ['*'],
                  }),
                ]
              }
            }
        }
    }

PostCSS Loader被用來(lái)處理Less文件，并且在loaderOptions中配置了PostCSS插件，但是PostCSS Loader的選項(xiàng)對(duì)象中沒(méi)有包含plugins屬性。// 使用postcssOptions屬性來(lái)配置PostCSS插件 postcssOptions

忽略不轉(zhuǎn)換

1、就是配置上面vue.config.js的selectorBlackList

2、就是把px設(shè)置為PX就不會(huì)轉(zhuǎn)換, 例如: min-width: 800PX

到此這篇關(guān)于Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法詳解的文章就介紹到這了,更多相關(guān)Vue2自適應(yīng)屏幕大小內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: