vue2.0移动端适配 rem布局

原创于 2022-04-19 17:05:40 发布 · 872 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何通过下载npm的lib-flexible和postcss-pxtorem插件，来实现移动端项目的px到rem的转换，以适应不同屏幕大小。在postcss.config.js中配置postcss-pxtorem，并修改lib-flexible源代码设定最大宽度为750px，确保在main.js中引入lib-flexible，并在index.html中调整meta标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载两个插件

命令

npm i lib-flexible -S  根据移动端屏幕大小而对应改变html的fontSize
npm i postcss-pxtorem@5.1.1 -D  根据html的fontSize将px单位改变为rem单位

项目中创建postcss.config.js用来配置postcss-pxtorem插件

注意是js文件

文件中复制以下内容

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue:75,
      propList:['*'],
      exclude: /(node_modules)|(folder_name)/i
    }
  }
}

修改lib-flexible源代码，让其调整的最大宽度为750px