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

Vue項目使用px2rem方法示例詳解

 更新時間：2023年07月17日 14:42:21   作者：郝同學(xué)1208  
這篇文章主要為大家介紹了Vue項目使用px2rem的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

文章序

設(shè)計稿給的是px，但是需要做自適應(yīng)，老生常談的問題了，使用flex布局+rem+按比例設(shè)置根節(jié)點font-size大小來實現(xiàn)，這里最麻煩的就是把px改寫成rem，手工改重復(fù)性太大，所幸，可以使用webpack插件在打包過程中幫我們自動轉(zhuǎn)化

使用方法

1.安裝包

npm i postcss-px2rem

2.編寫配置文件

編寫核心代碼，命名隨意，我這里命名為px2rem并放在src/utils文件夾內(nèi)

// 基準(zhǔn)大小
const baseSize = 100
// 設(shè)置 rem 函數(shù)
function setRem() {
  // 當(dāng)前頁面寬度相對于 1920 寬的縮放比例，可根據(jù)自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 設(shè)置頁面根節(jié)點字體大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設(shè)置 rem
window.onresize = function() {
  setRem()
}

在main.js中引入剛才的文件

import "./utils/px2rem"

vue.config.js中引入px2rem包并在css plugins里啟用postcss插件

const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 100   //基準(zhǔn)大小 baseSize，需要和rem.js中相同
})
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

Tips

行內(nèi)樣式的px不會轉(zhuǎn)換成rem

UI庫如果要改變樣式，在樣式的單位要使用rem

不想轉(zhuǎn)換成rem的話將px寫成PX

以上就是Vue項目使用px2rem方法示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue使用px2rem的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論