ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue中使用postcss-pxtorem实现适配

2022-05-22 19:35:15  阅读:310  来源: 互联网

标签:el vue amfe 适配 js flexible postcss pxtorem


vue中使用postcss-pxtorem实现适配

 

场景:vue搭建移动端页面,main.js引入全局css报错。

原因:用了postcss-px2rem与postcss-px2rem-exclude导致的问题,

解决方案:卸载后postcss-px2rem, 安装使用postcss-pxtorem。在postcss.config.js设置如下代码,可以自行更改设置,解决问题。

 

 

安装amfe-flexible和postcss-pxtorem

npm install postcss-pxtorem -S

npm install amfe-flexible -S

postcss-pxtorem将px转为rem;

amfe-flexible可进行屏幕自适应;

配置及使用

1、在main.js中引入amfe-flexible

import  "amfe-flexible";

2、根目录下添加postcss.config.js

module.exports = () => ({

  plugins: [

  // autoprefixer 自动补齐 CSS3 前缀,适配不同浏览器

    require('autoprefixer')({

      overrideBrowserslist: [

        "last 10 versions", // 所有主流浏览器最近10版本用

      ],

    }),

    require('postcss-pxtorem')({

      rootValue: 192.0, //设计稿元素尺寸/10,这里设计稿宽度为1920

      propList: ["*"], //是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*']

      unitPrecision: 3, //保留rem小数点多少位

      selectorBlackList: ['el-input', 'el-step', 'no-'],//则是一个对css选择器进行过滤的数组,比如你设置为['el-'],那所有el-类名里面有关px的样式将不被转换,这里也支持正则写法。

      replace: true,

      mediaQuery: false, //媒体查询( @media screen 之类的)中不生效

      // minPixelValue: 3, //px小于3的不会被转换

    })

  ]

});

配置完成之后,重启即可

可能遇到问题

运行报错如下

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

搜索

复制

标签:el,vue,amfe,适配,js,flexible,postcss,pxtorem
来源: https://www.cnblogs.com/songfengyang/p/16298656.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有