手把手教你如何在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-seamless-scroll和vue3-seamless-scroll,组件的用法也非常简单,下面就跟随小编一起来学习一下吧2024-11-11
这篇文章主要介绍了Vue 实现手动刷新组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
vue3中v-for报错'item'is of type'unknown'的
在写vue3+ts的项目,得到一个数组,需要循环展示,使用v-for循环,写完之后发现有个报错,接下来通过本文给大家介绍vue3中v-for报错 ‘item‘ is of type ‘unknown‘的解决方法,感兴趣的朋友一起看看吧2023-11-11
vue3 组件与API直接使用的方法详解(无需import)
这篇文章主要介绍了vue3 组件与API直接使用的方法(无需import)，主要包括vue3自动导入和API的自动引入问题，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
以前我们经常在react中使用jsx,现在我们在vue中也是用jsx,下面这篇文章主要给大家介绍了关于在vue中写jsx的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
循环使用v-for指令,v-for指令需要以site in sites形式的特殊语法,sites是源数据数组并且site是数组元素迭代的别名,下面这篇文章主要给大家介绍了关于Vue中v-for列表循环的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要为大家详细介绍了vue实现图片裁剪后上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
Vue中的 nextTick 涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于 nextTick 的源码涉及到不少知识，很多不太理解，暂且根据自己的一些感悟介绍下 nextTick2019-05-05
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报
这篇文章主要介绍了vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论