vue cli3项目移动端适配

最新推荐文章于 2025-03-17 14:30:20 发布

codezha

最新推荐文章于 2025-03-17 14:30:20 发布

阅读量914

点赞数

分类专栏：前端 Vue

本文链接：https://blog.youkuaiyun.com/codezha/article/details/105065778

版权

前端同时被 2 个专栏收录

63 篇文章

订阅专栏

Vue

21 篇文章

订阅专栏

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

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

安装依赖
```
//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-"]
                })]
            }
        }
    }
}