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

vue?px轉(zhuǎn)rem配置詳解

 更新時(shí)間:2021年12月09日 15:49:36   作者:hyduan_h5  
這篇文章主要為大家介紹了vue?px轉(zhuǎn)rem配置,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

方法一

一、配置與安裝步驟:

1、在 Vue 項(xiàng)目的 src 文件夾下創(chuàng)建一個(gè) config 文件夾:

2、在 config 文件夾中創(chuàng)建 rem.js:

在這里插入圖片描述

3、將以下代碼復(fù)制到 rem.js 中:

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

4、在 src 文件夾下的 main.js 中引入:

import './config/rem'

5、在 Vue 項(xiàng)目根目錄終端引入:

npm install postcss-pxtorem -D

6、在 Vue 項(xiàng)目文件夾下的 postcss.config.js 中加入:

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue": 16,
      "propList": ["*"]
    }
  }
}

方法二

第一步 安裝 lib-flexible

npm i lib-flexible --save

第二步 安裝 px2rem-loader

npm install px2rem-loader --save-dev

第三步 引入lib-flexible

import 'lib-flexible/flexible'

第四步 最重要的一步 配置utils文件

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5
    }
  }<br>//在generateLoaders方法中添加px2remLoader
1
const loaders = [cssLoader,px2remLoader]

或者第四步:Create new “vue.config.js” file if without “vue.config.js” (目錄: hello-world/vue.config.js)

module.exports = {
     chainWebpack: (config) => {
         config.module
         .rule('css')
         .test(/\.css$/)
         .oneOf('vue')
         .resourceQuery(/\?vue/)
         .use('px2rem')
         .loader('px2rem-loader')
         .options({
             remUnit: 75 // 75表示750的設(shè)計(jì)稿,37.5表示375的設(shè)計(jì)稿
         })
     }
 }

1.按照px來編寫都會(huì)轉(zhuǎn)化成rem的形式,但是有些地方我們不想轉(zhuǎn)換,可以用下面兩種方法。

在px后面添加/no/,不會(huì)轉(zhuǎn)化px,會(huì)原樣輸出。 — 一般border需用這個(gè)
在px后面添加/px/,會(huì)根據(jù)dpr的不同,生成三套代碼。---- 一般字體需用這個(gè)

2 使用過程中,發(fā)現(xiàn)某些import外聯(lián)樣式不會(huì)被轉(zhuǎn)化,注意避開這些坑。

<style src='../assets/style.css'>
 /* px2rem能正常轉(zhuǎn)換 */
</style>

<style>
  /* px2rem不能正常轉(zhuǎn)換 */
  @import '../assets/style.css';
</style>

<style>
  /* px2rem不能正常轉(zhuǎn)換 */
  @import url('../assets/style.css');

</style>

方法三

第一步 安裝 amfe-flexible

npm i amfe-flexible -S

第二步 安裝 postcss-pxtorem

npm install postcss-pxtorem --save-dev

第三步 引入amfe-flexible

import 'amfe-flexible'

第四步根目錄下創(chuàng)建postcss.config.js文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

總結(jié)

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

  • vue項(xiàng)目預(yù)覽excel表格功能(file-viewer插件)

    vue項(xiàng)目預(yù)覽excel表格功能(file-viewer插件)

    這篇文章主要介紹了vue項(xiàng)目預(yù)覽excel表格功能(file-viewer插件),本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2023-10-10
  • 詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式

    詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式

    這篇文章主要給大家介紹了在vue中,父子組件傳遞參數(shù)?props?實(shí)現(xiàn)方式,文章通過代碼示例介紹的非常詳細(xì),對我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下
    2023-07-07
  • Vue3開發(fā)必備的六個(gè)VSCode插件推薦

    Vue3開發(fā)必備的六個(gè)VSCode插件推薦

    在VSCode中添加好用的插件可以提高我們的開發(fā)效率,這些可以幫助我們格式化,擴(kuò)充性,執(zhí)行最佳實(shí)踐的代碼方式,自動(dòng)完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關(guān)于Vue3開發(fā)必備的六個(gè)VSCode插件,需要的朋友可以參考下
    2022-12-12
  • 8個(gè)非常實(shí)用的Vue自定義指令

    8個(gè)非常實(shí)用的Vue自定義指令

    這篇文章主要介紹了8個(gè)非常實(shí)用的Vue自定義指令,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-12-12
  • Vue + ts實(shí)現(xiàn)輪播插件的示例

    Vue + ts實(shí)現(xiàn)輪播插件的示例

    這篇文章主要介紹了Vue + ts實(shí)現(xiàn)輪播插件的示例,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2020-11-11
  • 如何解決ElementPlus的el-table底白線問題

    如何解決ElementPlus的el-table底白線問題

    這篇文章主要介紹了如何解決ElementPlus的el-table底白線問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)的實(shí)例詳解(params/query)

    vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)的實(shí)例詳解(params/query)

    在使用`router.push`進(jìn)行路由跳轉(zhuǎn)到另一個(gè)組件時(shí),可以通過`params`或`query`來傳遞參數(shù),這篇文章主要介紹了vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)(params/query),需要的朋友可以參考下
    2023-09-09
  • 一文詳解Vue中加上key后發(fā)生什么

    一文詳解Vue中加上key后發(fā)生什么

    本文主要介紹了一文詳解Vue中加上key后發(fā)生什么,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • Vue3開發(fā)右鍵菜單的示例詳解

    Vue3開發(fā)右鍵菜單的示例詳解

    右鍵菜單在項(xiàng)目開發(fā)中是屬于比較高頻的組件了,所以這篇文章小編主要來和大家介紹一下如何利用vue3開發(fā)一個(gè)右鍵菜單,有需要的可以參考下
    2024-03-03
  • vue3 Vite 進(jìn)階rollup命令行使用詳解

    vue3 Vite 進(jìn)階rollup命令行使用詳解

    這篇文章主要介紹了vue3 Vite 進(jìn)階rollup命令行使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08

最新評(píng)論