移动端Rem适配(基于vue-cli3 ,ui框架用的是vant-ui)
介绍
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值
1、安装lib-flexible(用于设置 rem 基准值)
1 | npm i -S amfe-flexible |
2、在main.js文件中引入lib-flexible
1 | import 'amfe-flexible' |
3、安装postcss-pxtorem(postcss-pxtorem是一款 postcss 插件,用于将单位转化为 rem)
1 | npm install postcss-pxtorem --save-dev |
4、在public/index.html加入meta标签
1 | <meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" > |
5、项目配置postcss,有两种方式(注意package.json 和 vue.config.js只选一种配置即可,不要同时配置)
(1)、在package.json中配置
1 2 3 4 5 6 | "postcss" : { "plugins" : { "autoprefixer" : {}, "postcss-pxtorem" : { "rootValue" : 37.5, "propList" : [ "*" ]} } } |
(2)、在vue.config.js中配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | const autoprefixer = require( 'autoprefixer' ); const pxtorem = require( 'postcss-pxtorem' ); module.exports = { css: { loaderOptions: { postcss: { plugins: [ autoprefixer(), pxtorem({ rootValue: 37.5, propList: [ '*' ] }) ] } } } }; |
这样就完成了适配,需要注意的是,css里面我们就只需要写px,然后会自动转换成rem在浏览器显示,rootValue设置为37.5,之所以设为37.5,是为了引用像vant这样的第三方UI框架,因为第三方框架没有兼容rem,用的是px单位,将rootValue的值设置为设计图宽度(这里为750px)75的一半,即可以1:1还原vant、mint-ui的组件,否则会样式会有变化,例如按钮会变小。既然设置成了37.5 那么我们必须在写样式时,也将值改为设计图(设计图的宽为750px)的一半。
由于在写样式的时候将所有的大小都改成一半这样写起来不方便,所以通常在设置rootValue的时候更多人愿意将其设置为75,这样就可以按设计稿的大小来写样式了,设计稿设计出来是多少像素,写样式的时候就写成多样式。可以这样的话对于vant、mint-ui等第三方框架的组件,他们渲染出来就会出现变小的情况,因为他们是基于375设计的。下面提供了两种方法解决这种第三方框架的组件出现缩小的问题,下面均以vant-ui为例:
1、在配置中设置排除vant-ui相关的组件,让该框架的组件不转为rem,这样的话框架的组件是px作为单位均不自适应了。(这种方式个人不怎么建议)
这里以vue.config.js中的配置为例(package.json的配置类似)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | const autoprefixer = require( 'autoprefixer' ); const pxtorem = require( 'postcss-pxtorem' ); module.exports = { css: { loaderOptions: { postcss: { plugins: [ autoprefixer(), pxtorem({ rootValue: 75, propList: [ '*' ], "selectorBlackList" :[ "van-" ] //排除vant框架相关组件 }) ] } } } }; |
2、动态设置rootValue的大小,即对于vant-ui框架的组件 将rootValue设置成37.5,对于我们自己的750宽度的设计稿的将rootValue设置成75。这样就可以达到所有的均可自适应了
在根目录下新建postcss.config.js文件,同时将vue.config.js 及 package.json文件中的postcss的配置删除。然后在postcss.config.js文字中添加入下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | const autoprefixer = require( 'autoprefixer' ); const pxtorem = require( 'postcss-pxtorem' ); module.exports = ({ file }) => { let remUnit if (file && file.dirname && file.dirname.indexOf( 'vant' ) > -1) { remUnit = 37.5 } else { remUnit = 75 } return { plugins: [ autoprefixer(), pxtorem({ rootValue: remUnit, propList: [ '*' ], selectorBlackList: [ 'van-circle__layer' ] }) ] } } |
好了,到目前为止就算解决了 第三方框架的组件出现缩小 的问题。
最后啰嗦一句:由于viewport
单位得到众多浏览器的兼容,lib-flexible
这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport
来替代此方案
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用