vue 使用postcss-pxtorem pc端或移动端自适应适配

最新推荐文章于 2024-08-27 11:34:21 发布

6浩

最新推荐文章于 2024-08-27 11:34:21 发布

阅读量1.3k

点赞数 8

文章标签： vue.js postcss javascript

本文链接：https://blog.csdn.net/liuhao66_/article/details/137814505

版权

本文介绍了如何在Vue项目中使用postcss-pxtorem插件将设计稿中的像素转换为rem单位，包括下载推荐版本，创建rem.js文件处理窗口缩放，以及在vue.config.js中配置postcss的详细步骤。

摘要由CSDN通过智能技术生成

一、下载依赖 postcss-pxtorem 推荐版本,建议版本号>5

npm install  postcss-pxtorem  -D

二、新建一个rem.js的文件，在main.js中引用

// 假设设计稿为1920px

const size = 192; //设计稿宽度%10 比如 1920 

// 设置rem 函数
function setRem() {
//计算出 比例来 当前分辨率的宽%设计稿宽度
  const scale = window.screen.width / 1920;
  // 给根元素设置font-size
  document.documentElement.style.fontSize =
    size * Math.min(scale, 2) + "px";
}
 setRem();
  window.onresize = function () {
    setRem();
  };

三、在vue.confing.js 填写postcss-pxtorem 配置

module.exports = {
      css: {
   loaderOptions: {
     postcss: {
       plugins: [
         // 兼容浏览器，添加前缀
         require("autoprefixer")({
           overrideBrowserslist: [
             "Android 4.1",
             "iOS 7.1",
             "Chrome > 31",
             "ff > 31",
             "ie >= 8",
             //'last 10 versions', // 所有主流浏览器最近10版本用
           ],
           grid: true,
         }),
         require("postcss-pxtorem")({
           rootValue: 192, //设计稿宽度%10 比如 1920
           exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module|src)/
           propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为["*"]全部，假设需要仅对边框进行设置，可以写]['*','!border*']
           //selectorBlackList :['.box'],//，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。 
           replace: true, //替换包含rems的规则。
           mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
           minPixelValue: 0, //设置要替换的最小像素值(3px会被转rem)。 默认 0
         }),
       ],
     },
   },
 },
}

到现在就可以啦. 补充:如果想使用px作为单位,可以将px写为Px