vue中使用postcss-px2rem的两种方法

Edie ·

更新时间:2024-09-20

· 1651 次阅读

如何使用：

1.安装

2.设置

vue项目中使用postcss-px2rem的2种方法

在项目中为了屏幕适配，经常会用到rem，postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方法适用于使用cli2脚手架搭建的项目,现在好多数项目使用cli3搭建,我在后边的文章中增加了vue使用rem实现移动端屏幕适配).)

如何使用： 1.安装 npm i postcss-px2rem --save -dev 2.设置

1）.找到项目根目录下的.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基准值，75是iphone6标准
  }
}

remUnit: 75 代表 1rem = 75px; 所以当你一个75px值时，它会自动转成 (75px/75)rem,

转化完之后，你还需要在根元素设置他的font-size,因为rem是相对根元素来设置大小的

html {
    font-size: 10vw;
}

这样的话我们设置的px值就变成对应的 10%的屏幕宽度 *(75px/75)rem

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

本人使用的是这种方法.
首先需要设置html的fontsize值,1rem = html的font-size,这里咱们动态设置一下,可以直接在index.html中设置
PC端

(function () {
    function setRootFontSize() {
        let rem, rootWidth;
        let rootHtml = document.documentElement;
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
        // 19.2 = 设计图尺寸宽 / 100（ 设计图的rem = 100 ）
        rem = rootWidth / 19.2;
        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
})();

移动端

(function () {
    function setRootFontSize() {
        let dpr, rem, scale, rootWidth;
        let rootHtml = document.documentElement;
        dpr = window.devicePixelRatio || 1; //移动端必须设置
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
        rem = rootWidth * dpr / 19.2; // 19.2 = 设计图尺寸宽1920 / 100（设计图的rem = 100）
        scale = 1 / dpr;
        // 设置viewport，进行缩放，达到高清效果 (移动端添加)
        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');
        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
    window.addEventListener("orientationchange", setRootFontSize, false); //移动端
})();

'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实现移动端屏幕适配的文章,有需要的可以去看看,希望对你有帮助,多多评论指教.

到此这篇关于vue项目中使用postcss-px2rem的方法总结的文章就介绍到这了,更多相关vue使用postcss-px2rem内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE px 方法 postcss rem

1024 个赞