PC端使用rem进行适配（lib-flexible和postcss-pxtorem）

宋小土

已于 2022-08-25 16:23:37 修改

阅读量1k

点赞数 1

文章标签： postcss vue.js javascript

于 2022-07-12 23:45:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45003732/article/details/125754276

版权

本文详细介绍了如何在Vue项目中利用lib-flexible和postcss-pxtorem进行PC端的响应式布局适配。步骤包括创建Vue项目、安装相关依赖、配置postcss-pxtorem，以实现不同屏幕尺寸下页面的完美展示。

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

PC端使用rem进行适配（lib-flexible和postcss-pxtorem）

另一个方法见文章：https://blog.youkuaiyun.com/weixin_45003732/article/details/126519886

1、创建vue项目
vue create 项目名（我的项目名叫vue01）
在这里插入图片描述
2、安装lib-flexible依赖
npm install lib-flexible -S

3、安装 postcss-pxtorem依赖
npm install postcss-pxtorem -D

4、在main.js引入 lib-flexible（注意，安装的是 lib-flexible就引入 lib-flexible）
在vue.config.js中写入：

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
 
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '',
    productionSourceMap: false,
 
    //postcss-pxtorem
    css: {
        loaderOptions: {
          postcss: {
            plugins: [
              autoprefixer(),
              pxtorem({
                rootValue: 192, //设计稿宽度为1920px的
                propList: ['*']
              })
            ]
          }
        }
      }
}

6、运行项目配置成功
在这里插入图片描述