首页 > 其他分享 >VUE基于 vant 的移动端 REM 适配

VUE基于 vant 的移动端 REM 适配

时间:2024-03-26 15:01:03浏览次数:26  
标签:VUE vant 基准值 样式 适配 file amfe

当我们添加完vant组件库后,还需要对项目的移动端进行适配

执行 yarn add amfe-flexible 安装 amfe-flexible

安装完成后我们在 main.js 中配置 动态设置rem基准值

然后通过执行 yarn add postcss-pxtorem -D 把  postcss-pxtorem 安装到开发环境中

在项目根目录中添加 .postcssrc.js 文件,并把按照上图所示完成配置,注意:要重启项目

rootValue ({ file }) {
  return file.indexOf('vant') !== -1 ? 37.5 : 75
},

配置中这个选项是为了区分根据设计稿自定义样式和 vant 自带的 37.5 样式基准值,这样设置后就可以在样式中按设计稿写真实数据了

最终效果就是这样

标签:VUE,vant,基准值,样式,适配,file,amfe
From: https://blog.csdn.net/m0_37618883/article/details/137045832

相关文章

  • Vue学习笔记61--mapActions + mapMutations
    原始实现 <template><div><h3>当前求和*10为:{{bigSum}}</h3><h3>当前求和为:{{sum}}</h3><h3>我在:{{school}},学习:{{subject}}</h3><selectv-model.number="selectNo"><option......
  • ssm基于Vue.js的在线购物系统的设计与实现论文
    毕业设计(论文)在线购物系统学院专业班级学号用户姓名指导教师完成日期年月日摘要随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于在线购物系统当然也不能排除在外,随着网络技术的不断成熟,带动了在线购物系统,它彻......
  • vue3+ts项目引入富文本编辑器wangeditor
    说明项目开发中,做到媒体说、资讯等模块时,会需要引入富文本编辑器,对比发现wangeditor使用群众多,并且很多问题也已经有解答。界面展示实现要点引入wangeditor配置导航栏代码<template><divstyle="border:1pxsolid#EEEFF0;border-radius:5px;overflow:hidden;wid......
  • Vue学习笔记60--mapState + mapGetters
    示例一:通过计算属性src/store/index.js //该文件用于创建vuex中最为核心的store//引入VueimportVuefrom'vue'//引入vueximportVuexfrom'vuex'//使用插件Vue.use(Vuex)/*准备actions--用于相应组件中的动作1.context--miniStore2.actions:建议逻辑处理在......
  • vue难不难?新手学习多久能上手?
    Vue是一款流行的前端框架,对于新手来说,学习Vue并不是一件很难的事情,但需要一定的学习时间和实践。Vue的入门相对容易,它具有简洁的语法和直观的API,使得初学者能够快速上手。如果你已经有了一定的HTML、CSS和JavaScript基础,那么学习Vue将会更加顺利。但是,要想真正掌握......
  • 基于SpringBoot+Vue+uniapp微信小程序的乡村政务服务系统的详细设计和实现(源码+lw+部
    文章目录前言项目运行截图技术框架后端采用SpringBoot框架前端框架Vue可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......
  • [Vue3] 嵌套路由
    App.vue<template><divclass="app"><!--导航区--><divclass="navigate"><RouterLinkto="/home">Home</RouterLink><RouterLinkto="/news">News</Route......
  • 如何用GPT开发vue代码
    1、首先配置左侧菜单栏children、路由、添加components里面的文件夹和页面noise.vue略)2、安装插件vuevscodevbase3、按UI设计图编写页面的div排版 4、前提:先简单写了一些静态的数据到静态页面上,包括getNoiseList函数和setCharts函数,然后再问编写询问GPT的语句,尽量包含......
  • 基于vue+Springboot后台前后端分离项目:购物商城设计与实现(源码+文档+安装部署)
      博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书......
  • 基于SpringBoot+Vue的大学生兼职管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我自己的网站自己的小程序(小蔡coding)代码参考数据库参考源码获取前言......