快捷導(dǎo)航

vue中使用postcss-px2rem的兩種方法

更新時(shí)間：2022年05月15日 11:19:44 作者：小炮兵快跑

這篇文章主要介紹了vue項(xiàng)目中使用postcss-px2rem的方法總結(jié),在項(xiàng)目中為了屏幕適配，經(jīng)常會(huì)用到rem，postcss-px2rem就是為了讓我們直接在將代碼中px自動(dòng)轉(zhuǎn)化成對(duì)應(yīng)的rem的一個(gè)插件，需要的朋友可以參考下

在項(xiàng)目中為了屏幕適配，經(jīng)常會(huì)用到rem，postcss-px2rem就是為了讓我們直接在將代碼中px自動(dòng)轉(zhuǎn)化成對(duì)應(yīng)的rem的一個(gè)插件.(下邊的方法適用于使用cli2腳手架搭建的項(xiàng)目,現(xiàn)在好多數(shù)項(xiàng)目使用cli3搭建,我在后邊的文章中增加了vue使用rem實(shí)現(xiàn) 移動(dòng)端屏幕適配).)

如何使用：

1.安裝

npm i postcss-px2rem --save -dev

2.設(shè)置

1）.找到項(xiàng)目根目錄下的.postcssrc文件

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      "browsers": ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 8']
     },
     'postcss-px2rem':{'remUnit':75}    //配置rem基準(zhǔn)值，75是iphone6標(biāo)準(zhǔn)
  }
}

remUnit: 75 代表 1rem = 75px; 所以當(dāng)你一個(gè)75px值時(shí)，它會(huì)自動(dòng)轉(zhuǎn)成 (75px/75)rem,

轉(zhuǎn)化完之后，你還需要在根元素設(shè)置他的font-size,因?yàn)閞em是相對(duì)根元素來設(shè)置大小的

html {
    font-size: 10vw;
}

這樣的話我們?cè)O(shè)置的px值就變成對(duì)應(yīng)的 10%的屏幕寬度 *(75px/75)rem

2）找到根目錄下的vue-loader.conf.js

本人使用的是這種方法.
首先需要設(shè)置html的fontsize值,1rem = html的font-size,這里咱們動(dòng)態(tài)設(shè)置一下,可以直接在index.html中設(shè)置
PC端

(function () {
    function setRootFontSize() {
        let rem, rootWidth;
        let rootHtml = document.documentElement;
        //限制展現(xiàn)頁面的最小寬度
        rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
        // 19.2 = 設(shè)計(jì)圖尺寸寬 / 100（ 設(shè)計(jì)圖的rem = 100 ）
        rem = rootWidth / 19.2;
        // 動(dòng)態(tài)寫入樣式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
})();

移動(dòng)端

(function () {
    function setRootFontSize() {
        let dpr, rem, scale, rootWidth;
        let rootHtml = document.documentElement;
    
        dpr = window.devicePixelRatio || 1; //移動(dòng)端必須設(shè)置
        //限制展現(xiàn)頁面的最小寬度
        rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
        rem = rootWidth * dpr / 19.2; // 19.2 = 設(shè)計(jì)圖尺寸寬1920 / 100（設(shè)計(jì)圖的rem = 100）
        scale = 1 / dpr;
    
        // 設(shè)置viewport，進(jìn)行縮放，達(dá)到高清效果 (移動(dòng)端添加)
        let vp = document.querySelector('meta[name="viewport"]');
        vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
    
        // 動(dòng)態(tài)寫入樣式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
    window.addEventListener("orientationchange", setRootFontSize, false); //移動(dòng)端
})();

vue-loader.conf.js位置

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

const px2rem = require('postcss-px2rem')
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  },
  postcss: function() {
    return [px2rem({remUnit: 100})];
  }
}

修改完成后記得重新編譯
我還寫了一篇 vue使用rem實(shí)現(xiàn) 移動(dòng)端屏幕適配的文章,有需要的可以去看看,希望對(duì)你有幫助,多多評(píng)論指教.

到此這篇關(guān)于vue項(xiàng)目中使用postcss-px2rem的方法總結(jié)的文章就介紹到這了,更多相關(guān)vue使用postcss-px2rem內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: