Vue移动端适配并解决rem影响第三方ui库样式问题

最新推荐文章于 2024-08-06 09:48:49 发布

依旧大白丶

最新推荐文章于 2024-08-06 09:48:49 发布

阅读量891

点赞数 2

分类专栏：移动端移动端适配文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44602430/article/details/120910483

版权

本文介绍了在Vue移动端项目中如何进行适配，并解决使用rem单位时影响第三方UI库样式的常见问题。通过安装lib-flexible，配置postcss-px2rem-exclude，以及在index.html中添加相应代码，可以实现适配并防止第三方库样式异常。需要注意的是，这种方法仅转换.vue文件style标签中的px，且允许排除特定行。当忽视node_modules目录下的文件，可以避免第三方组件因动态data-dpr导致的样式问题。

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

Vue移动端适配并解决rem影响第三方ui库样式问题

一、项目中安装lib-flexible

npm install lib-flexible --save

二、在项目的入口main.js文件中引入lib-flexible

import 'lib-flexible'

三、安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

四、配置 postcss-px2rem-exclude

1.在项目的根目录下找到文件.postcssrc.js，在里面添加如下代码

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px2rem-exclude": {  // 添加的代码
      remUnit: 75,
      exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
    }
  }
}