手把手教你如何在vue项目中使用rem布局
H-hang 人气:0如何在vue项目中使用rem布局
场景:
在我们开发移动端项目中,实现手机页面布局,需要使用rem布局,那么该如何使用呢?
本文就详细的讲解了在vue项目中使用rem布局的整个过程,可以仔细阅读哦!
方法:
(1)使用lib-flexbile
(2)使用postcss-pxtorem
注意:
两种方法选其一使用哦,避免冲突!! !
方法一:使用lib-flexible
1. 安装包
npm i lib-flexible
2. 引入文件
在main.js(入口)中引入js文件 --- import 'lib-flexible/flexible.js'
3. 根据需要设置rem
在node_modules文件中找flexible设置rem
为了方便可以设置rem为 width / 37.5
相当于1rem=10px
4.使用rem
//比如设置p标签字体大小为24px p { font-size:2.4rem }
方法二:使用postcss-pxtorem
1. 安装包
//安装 postcss-pxtorem npm i postcss-pxtorem -s
2. 创建rem.js文件
在src目录新建rem文件夹(一般情况下可以创建util文件夹),新建rem.js,添加如下代码
//兼容处理 function setHtml() { //获取设备宽度 var deviceWidth = document.documentElement.offsetWidth; //给html标签设置fontSize,就是给rem赋值 document.documentElement.style.fontSize = deviceWidth / 375 * 10 + 'px'; } //窗口大小变化的时候执行 window.onresize = setHtml; //页面初始加载时也要触发 setHtml();
3. 新建 .postcssrc.js
在项目根目录新建 .postcssrc.js(注意 . 不要忘记加),添加代码如下:
module.exports = { "plugins": { "postcss-pxtorem": { "rootValue": 37.5, "propList": ["*"] } } }
4. 在main.js中引入
注意:路径根据自己新建的文件夹为准
import '@/rem/rem.js'
5. 设置body的font-size
html { font-size: 10px; // 相当于1rem = 10px } body { font-size: 16px; }
6. 可参照流程图
以上就是vue如何使用rem适配的两种方法
总结
加载全部内容