手把手教你如何在vue项目中使用rem布局
更新时间：2023年02月08日 11:35:55 作者：H-hang
公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下,下面这篇文章主要给大家介绍了关于如何在vue项目中使用rem布局的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
如何在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适配的两种方法
总结
到此这篇关于如何在vue项目中使用rem布局的文章就介绍到这了,更多相关vue项目使用rem布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
详解vue-template-admin三级路由无法缓存的解决方案
这篇文章主要介绍了vue-template-admin三级路由无法缓存的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
解决vue使用vant轮播组件swipe + flex时文字抖动问题
这篇文章主要介绍了解决vue使用vant轮播组件swipe + flex时文字抖动问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-01-01
这篇文章主要介绍了vue3项目引入pinia报错的简单解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue遮罩层如何阻止滚动，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
自定义指令是 vue 中使用频率仅次于组件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五个生命周期钩子，接下来通过本文给大家详细介绍Vue指令工作原理实现方法，需要的朋友参考下吧2021-06-06
这篇文章主要介绍了Vue filter 过滤当前时间 实现实时更新效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了element-ui配合node实现自定义上传文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 插槽简介及使用示例，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-11-11
这篇文章主要介绍了vue可ctrl,shift多选,可添加标记日历组件详细，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
本文主要介绍了Vite2+Vue3渲染Markdown文档的方法实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的可以了解一下2021-08-08
最新评论