快捷導(dǎo)航

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

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

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

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

方案一

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

2.在項目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

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

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

4.在項目根新建postcss.config.js

//另一種可以新建postcss.config.js，寫入如下代碼
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è)計稿元素尺寸/16，比如元素寬320px,最終頁面會換算成 20rem
      propList: ["*"], //是一個存儲哪些將被轉(zhuǎn)換的屬性列表，這里設(shè)置為['*']全部，假設(shè)需要僅對邊框進(jìn)行設(shè)置，可以寫['*', '!border*']
      unitPrecision: 5, //保留rem小數(shù)點多少位
      //selectorBlackList: ['.radius'],  //則是一個對css選擇器進(jìn)行過濾的數(shù)組，比如你設(shè)置為['fs']，那例如fs-xl類名，里面有關(guān)px的樣式將不被轉(zhuǎn)換，這里也支持正則寫法。
      replace: true, //這個真不知到干嘛用的。有知道的告訴我一下
      mediaQuery: false, //媒體查詢( @media screen 之類的)中不生效
      minPixelValue: 12, //px小于12的不會被轉(zhuǎn)換
    },
  },
};

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

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

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

此方案不打開控制臺或不改變?yōu)g覽器的顯示區(qū)域?qū)捀?，會自動把html的fontsize改變造成樣式變化，每次都要手動刷新下才正常，此bug暫時沒找到解決方法，感覺不是很好。

方案二（完美解決）

1.在自己項目utils下新建rem.js文件

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

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

import '@/utils/rem.js'

3.安裝postcss-pxtorem

npm i postcss-pxtorem

如果有報錯版本太高可以試下低版本

npm i postcss-pxtorem@5.1.1 -D

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

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

PostCSS Loader被用來處理Less文件，并且在loaderOptions中配置了PostCSS插件，但是PostCSS Loader的選項對象中沒有包含plugins屬性。// 使用postcssOptions屬性來配置PostCSS插件 postcssOptions

忽略不轉(zhuǎn)換

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

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

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

您可能感興趣的文章: