移动端适配rem

news2024/11/15 4:10:56

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.5
              selectorBlackList: ['vant'], // 忽略转换匹配项
              propList: ['*']
            })
          ]
        }
      }
    }
  }

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/801713.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

QT 视图(view)模型(model)汇总

QStringListModel和QListView UI界面 widget头文件 #ifndef WIDGET_H #define WIDGET_H#include <QStringList> #include <QStringListModel> #include <QWidget>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : publi…

全面升级 | MoHub 2023b版本正式上线

为了满足装备数字化发展需求&#xff0c;为知识模型化与模型开放共享提供自主平台&#xff0c;同元软控于2023年初推出来工业知识模型互联服务平台MoHub。7月27日&#xff0c;工业知识模型互联平台MoHub 2023b如期升级上线。此次升级&#xff0c;面向平台用户重点在云化工具、知…

PDU+远控,企业如何应用工业级智能PDU远程赋能业务?

在很多企业级业务场景下&#xff0c;如何保障相关业务设备的稳定供电非常重要&#xff0c;插座也就成为了这些业务体系中的核心基建。 为了保证相关设备供电的稳定&#xff0c;并且实现高效的远程管理&#xff0c;很多企业级的业务场景会部署专业的智能PDU&#xff0c;而在众多…

医疗器械维修工程师心得

彩虹医械维修技能班9月将开展本年第三期长期班&#xff0c;目前咨询人员也陆续多了起来&#xff0c;很多刚了解到医疗行业的&#xff0c;自身也没有多少相关的基础&#xff0c;在咨询时会问到没有基础能否学的会&#xff1f; 做了这行业的都知道&#xff0c;无论多么复杂的设备…

探讨缓存一致性问题

探讨缓存一致性问题 本文只探讨只读缓存&#xff0c;即只对缓存进行读取、写入、删除&#xff0c;不进行更新操作 前言 数据库的读写性能上限是比较低的&#xff0c;工程中经常在数据库前面加一层缓存&#xff0c;可能是Redis或者本地缓存。既然有缓存&#xff0c;那么不可避免…

归并交换基数简单选择排序

文章目录 1 交换排序1.1 冒泡排序1.1.1 冒泡排序算法1.1.2 性能分析 1.2 快速排序1.2.1 快排的算法1.2.2 性能分析1.2.3 快排的特点 2 简单选择排序2.1 简单排序算法2.1.1 性能分析 2.2 堆排序2.2.1 堆的调整2.2.2 筛选过程算法2.2.3 堆的建立算法2.2.4 性能分析 3 归并排序3.1…

CertGetCertificateChain trust error CERT_TRUST_REVOCATION_STATUS_UNKNOWN

执行命令&#xff1a; curl --cacert http_ca.crt -u elastic https://localhost:9200 结果报错了 直接访问https://localhost:9200/ &#xff0c;正常 解决办法&#xff1a; curl --cacert http_ca.crt -u elastic https://localhost:9200 --insecure

微信小程序:实现提示窗确定,取消执行不同操作(消息提示确认取消)showModal

效果 代码 wx.showModal({title: 提示,content: 是否确认退出,success: function (res) {if (res.confirm) {console.log(用户点击确定)} else if (res.cancel) {console.log(用户点击取消)}}})

linux 故障定位

linux 故障定位 1. cpu1.1 说明1.2 分析工具1.3 使用方式 2. 内存2.1 说明2.2 分析工具2.3 使用方式 3. I/O3.1 说明3.2 分析工具3.3 使用方式 4. 网络4.1 说明4.2 分析工具4.3 使用方式 5. 系统负载5.1 说明5.2 分析工具5.3 使用方式 6. 火焰图6.1 说明6.2 安装依赖库6.3 安装…

应用程序流量警报软件

为了避免因使用资源密集型应用程序&#xff08;如基于云的应用程序&#xff09;而出现的潜在中断和延迟问题&#xff0c;企业需要监控应用程序流量并尽快找到网络事件的根本原因。业务的应用程序流量监视是了解业务关键型应用程序何时具有高时间可用性以及何时存在利用率超过基…

网上订货系统源码 购买后交付一些什么内容

随着电子商务的快速发展&#xff0c;越来越多的企业开始意识到建立一个高效的网上订货系统的重要性。网上订货系统不仅可以提高企业的销售效率&#xff0c;还可以降低成本&#xff0c;提升客户满意度。然而&#xff0c;要建立一个完善的网上订货系统并不容易&#xff0c;需要考…

SpringMVC 拦截器详解

目录 一、介绍 二、过滤器与拦截器的简单对比 三、自定义拦截器 四、注册拦截器 五、案例演示-登录拦截器 5.1 自定义拦截器 5.2 注册拦截器 编写的初衷是为了自己巩固复习&#xff0c;如果能帮到你将是我的荣幸❣️ 一、介绍 SpringMVC提供的拦截器类似于JavaWeb中的过…

火山引擎VeDI最新分享:消费行业的数据飞轮从“四更”开始

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 数据飞轮&#xff0c;正在为消费行业的数字化升级提供一套全新模式。 在刚刚结束的《全链路增长&#xff1a;数据飞轮转动消费新生力》专场活动上&#xff0c;火山引…

事务隔离:为什么你改了我还看不见

前提概要 你肯定不陌生&#xff0c;和数据库打交道的时候&#xff0c;我们总是会用到事务。最经典的例子就 是转账&#xff0c;你要给朋友小王转 100 块钱&#xff0c;而此时你的银行卡只有 100 块钱。 转账过程具体到程序里会有一系列的操作&#xff0c;比如查询余额、做加减法…

第五章 Scala 变量与运算符

1 变量 变量是一种使用方便的占位符&#xff0c;用于引用计算机内存地址&#xff0c;变量创建后会占用一定的内存空间。基于变量的数据类型&#xff0c;操作系统会进行内存分配并且决定什么将被储存在保留内存中。因此&#xff0c;通过给变量分配不同的数据类型&#xff0c;你…

MyBatis查询数据库入门学习<一>

目录 1.MyBatis 是什么&#xff1f; MyBatis官网&#xff1a;mybatis – MyBatis 3 | 简介 2.为什么要学习 MyBatis&#xff1f; 3.怎么学MyBatis&#xff1f; 4.第⼀个MyBatis查询 4.1 创建数据库和表 4.2 添加MyBatis框架⽀持 4.2.1 ⽼项⽬添加MyBatis 4.2.2 新项⽬添…

Git时间:版本控制工具进阶

Git时间&#xff1a;版本控制工具进阶 忽略文件 Git允许用户将指定的文件或目录排除在版本控制之外&#xff0c;它会检查代码仓库的目录下是否存在一个名为.gitignore的文件&#xff0c;如果存在&#xff0c;就去一行行读取这个文件中的内容&#xff0c;并把每一行指定的文件…

Matlab的SimuLink对FS32K144编程--SPI通讯控制12bitDAC输出

​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ 1、硬件介绍&#xff0c;DAC芯片&#xff1a;AD5328BRUZ DAC_SPI_SCK----PTD0(SPI1) DAC_SPI_DIN----PTE0(SPI1)单片…

Android 之 使用 SoundPool 播放音效

本节引言&#xff1a; 第九章给大家带来的是Android中的多媒体开发&#xff0c;与其说是多媒体开发还不如是多媒体相关API的 的使用&#xff0c;说下实际开发中我们做了一些和多媒体搭边的东西&#xff1a;拍照&#xff0c;录音&#xff0c;播放音乐&#xff0c;播放视频... 嗯…

stable-diffusion-webui汉化教程

第一种方法 1.打开stable diffusion webui&#xff0c;进入"Extensions"选项卡 2.点击"Install from URL" 3、注意"URL for extension’s git repository"下方的输入框 4、填入地址&#xff1a;https://github.com/VinsonLaro/stable-diffus…