脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue使用rem适配

vue如何使用rem适配

 更新时间：2021年02月06日 16:56:32   作者：灰太狼的情与殇  
这篇文章主要介绍了vue如何使用rem适配，帮助大家处理vue开发移动应用时的兼容性问题，感兴趣的朋友可以了解下

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.效果图如下:

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

以上就是vue如何使用rem适配的详细内容，更多关于vue使用rem适配的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Vue学习笔记进阶篇之单元素过度

    Vue学习笔记进阶篇之单元素过度

    这篇文章主要介绍了Vue学习笔记进阶篇之单元素过度，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 详解Vue3中useLocalStorage的用法

    详解Vue3中useLocalStorage的用法

    这篇文章主要为大家详细介绍了Vue3中useLocalStorage用法的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-10-10
  • Vue3中使用setup通过ref获取子组件的属性

    Vue3中使用setup通过ref获取子组件的属性

    这篇文章主要介绍了Vue3中使用setup通过ref获取子组件的属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • 关于vuex状态刷新网页时数据被清空问题及解决

    关于vuex状态刷新网页时数据被清空问题及解决

    这篇文章主要介绍了关于vuex状态刷新网页时数据被清空问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • vue实现搜索功能

    vue实现搜索功能

    这篇文章主要为大家详细介绍了vue实现搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 详解vue axios用post提交的数据格式

    详解vue axios用post提交的数据格式

    这篇文章主要介绍了详解vue axios用post提交的数据格式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue中虚拟列表的原理与实现详解

    Vue中虚拟列表的原理与实现详解

    虚拟列表是一种技术，它只渲染用户当前可见的列表项，而不是渲染整个列表，这篇文章主要来和大家聊聊虚拟列表的原理与实现，希望对大家有所帮助
    2023-05-05
  • 17个vue常用的数组方法总结与实例演示

    17个vue常用的数组方法总结与实例演示

    这篇文章主要介绍了vue中常用的数组方法,包括：VUE数组转换字符串，VUE数组遍历，VUE数组过滤，VUE数组查询,VUE数组排序等功能，需要的朋友可以参考下
    2022-12-12
  • Vue中xlsx的使用方法指南

    Vue中xlsx的使用方法指南

    这篇文章主要给大家介绍了关于Vue中xlsx的使用方法指南,有很多办法都可以实现,其中最简单的还是使用插件xlsx,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • vue v-model的详细讲解(推荐!)

    vue v-model的详细讲解(推荐!)

    vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别,下面这篇文章主要给大家介绍了关于vue v-model的相关资料,需要的朋友可以参考下
    2022-04-04

最新评论