vue如何使用rem适配


Posted in Vue.js onFebruary 06, 2021

1.开发环境 vue
2.电脑系统 windows10专业版
3.在使用vue开发移动端的过程中,我们会因为兼容性而头疼,下面我来分享分享下面vue使用rem自适配,希望对你有所帮助。
4.废话不多说,直接上操作:

//安装 postcss-pxtorem
npm i postcss-pxtorem -S

5.在src目录新建rem文件夹,下面新建rem.js,添加如下代码:

//基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
 const salepro = document.documentElement.clientWidth / 750
 // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改.
 // 设置页面根节点字体大小
 document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
 setRem()
}

6.在项目根目录新建 .postcssrc.js,添加代码如下:

module.exports = {
 "plugins": {
 "postcss-pxtorem": {
  "rootValue": 37.5,
  "propList": ["*"]
 }
 }
}

注意:我在配置中,比例是1:1,也就是设计图宽是750px,你在css中直接写width:750px;就可以啦,不用进行换算,是不是很棒。

7.在main.js中引入

import '@/rem/rem.js'

8.在vue模板中使用,css中添加如下代码:

<style lang="scss" scoped>
.about {
 width: 750px;
 height: 100vh;
 box-sizing: border-box;
 background-color: blue !important;
 .kk {
  width: 350px;
  height: 350px;
  background-color: red;
 }
}
</style>

9.效果图如下:

vue如何使用rem适配

10.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

以上就是vue如何使用rem适配的详细内容,更多关于vue使用rem适配的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
如何管理Vue中的缓存页面
Feb 06 #Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 #Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 #Vue.js
vue使用echarts画组织结构图
Feb 06 #Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 #Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 #Vue.js
如何封装Vue Element的table表格组件
Feb 06 #Vue.js
You might like
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
js select常用操作控制代码
2010/03/16 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
js实现图片轮播效果
2015/12/19 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
python类中super() 的使用解析
2019/12/19 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
实习教师自我鉴定
2013/12/12 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
抽奖活动主持词
2014/03/31 职场文书
校车安全责任书
2014/08/25 职场文书
党员转正申请报告
2015/05/15 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
Python+Appium新手教程
2021/04/17 Python
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
Python集合的基础操作
2021/11/01 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL