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

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

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

文章序

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

使用方法

1.安裝包

npm i postcss-px2rem

2.編寫配置文件

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

// 基準大小
const baseSize = 100
// 設置 rem 函數(shù)
function setRem() {
  // 當前頁面寬度相對于 1920 寬的縮放比例，可根據(jù)自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 設置頁面根節(jié)點字體大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 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   //基準大小 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方法示例詳解的詳細內(nèi)容，更多關于Vue使用px2rem的資料請關注腳本之家其它相關文章！

相關文章

最新評論