vue cli3项目移动端适配

前端项目适配与rem布局

最新推荐文章于 2025-10-13 12:53:21 发布

原创最新推荐文章于 2025-10-13 12:53:21 发布 · 954 阅读

3 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

63 篇文章

订阅专栏

Vue

21 篇文章

订阅专栏

本文介绍如何在前端项目中使用lib-flexible和postcss-pxtorem实现响应式布局，通过npm安装依赖，配置vue.config.js，将px单位转换为rem单位，实现不同屏幕尺寸下的适配。

安装依赖
```
//cd 项目文件夹路径下,执行下面的命令
npm install lib-flexible postcss-loader postcss-pxtorem --save
//或者
npm install lib-flexible postcss-loader postcss-pxtorem -S
```
lib-flexible会自动为页面根据屏幕添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值

postcss-pxtorem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值

postcss-loader用来对.css 文件进行处理

配置

main.js中引入lib-flexible

import "lib-flexible"

配置vue.config.js

const pxRem = require("postcss-pxtorem")
module.exports = {
    css:{
        loaderOptions:{
            postcss: {
                //selectorBlackList正则过滤，符合的class不进行rem转化
                //单个的css语句需过滤的情况下，可以使用PX或Px单位
                plugins:[pxRem({
                    autoprefixer:{},
                    rootValue: 37.5,
                    propList: ["*"],// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部 默认全部处理
                    selectorBlackList:[".ig-",".dp-"]
                })]
            }
        }
    }
}