当前位置: 首页 > news >正文

移动端适配rem

1.安装amfe-flexible和postcss-pxtorem,

npm install amfe-flexible --save
npm install postcss-pxtorem@5.1.1 (这里我使用的postcss-pxtorem是5.1.1版本)

或者在pageage.json中写入

 "amfe-flexible": "^2.2.1","postcss-pxtorem": "^5.1.1",

在这里插入图片描述

然后重新安装依赖

2.在main.js导入amfe-flexible

import 'amfe-flexible';

3 .在postcss.config.js中写入(没有文件就在根目录新建和vue.config.js)

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

4.在vue.config.js中写入

css: {loaderOptions: {postcss: {postcssOptions: {plugins: [require('postcss-pxtorem')({ // 把px单位换算成rem单位rootValue: 37.5, // vant官方使用的是37.5selectorBlackList: ['vant'], // 忽略转换匹配项propList: ['*']})]}}}}

在这里插入图片描述

在这里插入图片描述

http://www.lryc.cn/news/96934.html

相关文章:

  • Go语言开发小技巧易错点100例(八)
  • 100个网络安全测试面试题
  • 7.26 作业 QT
  • Python - Opencv应用实例之树叶自动分割、标签及统计分析系统
  • IC设计工程师,参加IC面试应该注意哪些细节?
  • java poi导入Excel、导出excel
  • 【算法与数据结构】101、LeetCode对称二叉树
  • 【N32L40X】学习笔记04-gpio中断库
  • Godot 4 着色器 - Shader调试
  • liunx时间慢几分钟,定时更新系统时间
  • C# 委托详解
  • chatGPT 学习分享:内含PPT分享下载
  • 使用CRM进行数据分析的四大好处
  • Excel“牛人”变现方案参考
  • vscode和jetbrains IDEA添加免费的gpt代码生成插件
  • 【C#】医学实验室云LIS检验信息系统源码 采用B/S架构
  • linux:AWS LightSail 设置虚拟内存
  • “华为杯”研究生数学建模竞赛2016年-【华为杯】E题:粮食最低收购价问题研究
  • idea项目依赖全部找不到
  • 自动驾驶数据标注有哪些?
  • ChatGPT:人工智能语言模型的巅峰之作
  • 【unity之IMGUI实践】敌方逻辑封装实现【六】
  • llvm向用户抛出warning、error信息
  • 微服务学习笔记-----Nacos安装教程(Windows和Linux版本)
  • 程序员面试系列,docker常见面试题
  • Linux centos7.x系统将/home磁盘分配给/
  • 根据数组元素为对象,对元素对象的某一属性进行排序
  • mysql(三)用户权限管理
  • 字节JAVA岗位面试总结汇总
  • 29-使用RocketMQ做削峰处理