vue做移动端自适应插件实现rem

1.实现方式

postcss-pxtorem:将px转换为rem

amfe-flexible:为html、body提那家font-size,窗口调整的时候重新设置font-size

2.安装与使用 

npm install amfe-flexible --save

npm install postcss-pxtorem --save-dev

 1.再main.js入口文件引入

// 引入amfe-flexible 根据窗口调整html-font-size大小

import 'amfe-flexible'

2.创建postcss.config.js配置文件

module.exports = {plugins: {autoprefixer: {},// flexible配置"postcss-pxtorem": {"rootValue": 75, //设计稿宽度的1/10"mediaQuery": false, // 禁止转换媒体查询中的像素值"propList": ["*"] //需要做转化处理的属性,如`hight`、`width`、`margin`、`*`表示全部}}}

注意点:
(1)rootValue根据设计稿宽度除以10进行设置,这边假设设计稿为370,即rootValue设为37.5;

(2)propList是设置需要转换的属性,这边*为所有都进行转换。

如果出现报错,降低版本

"dependencies":{

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

}

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

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

相关文章

FOC,即Field-Oriented Control

FOC,即Field-Oriented Control,也被称为磁场导向控制或矢量控制,是一种利用变频器(VFD)来控制三相电机的技术。以下是对FOC的详细介绍,涵盖了其基本概念、控制原理、应用领域以及优缺点等方面的内容。 一、…

算法——图论:路径,回溯

. - 力扣(LeetCode) 给你一个有 n 个节点的 有向无环图(DAG),请你找出所有从节点 0 到节点 n-1 的路径并输出(不要求按特定顺序) graph[i] 是一个从节点 i 可以访问的所有节点的列表&#xff0…

GEE训练——如何实现单景影像边界的提取以sentinel和Landsat数据为例(栅格转矢量)

本教程的主要目的是如何实现单景影像边界的提取以sentinel和Landsat数据为例,很多人是项通过GEE来实现单景影像的获取过程,所以这里最重要的就是首先根据点确定影像的范围,或者根据指定的单景影像的编号来获取指定的单景影像,然后将其矢量化即可。 简介 在Google Earth E…

mysql8.x在windows server2019安装并设置主从同步难点问题

1.MySQL服务无法启动并提示“MySQL8.x本地计算机上的MySQL服务启动后停止” 1)用notepad打开my.ini文件,重新保存为ansi编码格式。 2)右键windows图标,点击“计算机管理”,点击“本地用户和组”,双击“组…

JSP技术及其应用

目录 一、JSP 指令元素 1. page指令 二、JSP 注释 1. HTML注释: 2. Java注释: 3. JSP注释: 三、页面编码格式 1. pageEncoding: 2. contentType: 一、JSP 指令元素 JSP包含三种主要的指令元素:pag…

SQL-CRUD-2数据库实验

目录 第一关任务描述 相关知识 插入完整内容的行 插入选定内容的行 编程要求 测试说明 第一关代码 第二关任务描述 相关知识 删除表中的指定行 删除表中的所有行 编程要求 测试说明 第二关代码 第三关任务描述 相关知识 更新表中的指定行 编程要求 测试说明…

【Pytorch入门】小土堆PyTorch入门教程完整学习笔记(详细笔记并附练习代码 ipynb文件)

小土堆PyTorch入门教程笔记 最近在观看PyTorch深度学习快速入门教程(绝对通俗易懂!)【小土堆】顺便做点笔记,方便回看,同时也希望记录的笔记能够帮助到更多在入门的小伙伴~ 【注】仅记录个人觉得重要的知识&#xff0c…

cas学习2:idea里搭建cas项目

在上篇中介绍了cas服务在tomcat中怎么启动的及某j集成cas,这篇讲下idea怎么集成cas成一个项目,为后续的定制自己的项目做好铺垫。 1.下载CAS 模板 Overlay Template,我这里使用 Apereo CAS 5.3 版本,JDK需要1.8 地址&#xff1a…

JavaWeb后端——HTTP协议/Tomcat

HTTP HTTP协议:无状态,对事务处理没有记忆能力。每次请求-响应都是独立的。后一次请求不会记录前一次请求数据。缺点:多次请求之间不能共享数据,优点:速度快。 HTTP协议请求报文: HTTP协议响应报文&#x…

分布式算法 - 雪花算法

雪花算法是一种用于生成全局唯一ID的分布式算法,用于解决分布式系统中生成唯一ID的需求。 雪花算法的核心思想是将生成的ID分为不同的部分,每个部分代表不同的含义。通常情况下,一个雪花 ID由3个部分组成: 时间戳:时…

JVM篇详细分析

JVM总体图 程序计数器: 线程私有的,每个线程一份,内部保存字节码的行号,用于记录正在执行字节码指令的地址。(可通过javap -v XX.class命令查看) java堆: 线程共享的区域,用来保存对…

Java中的基本数据与运算(关键字、标识符、运算符)

目录 一、关键字 二、标识符 三、注释 四、变量 五、数据类型 六、运算符 6.1 算术运算符 6.2 比较运算符 6.3 逻辑运算符 6.4 位移运算符 一、关键字 在 Java 中内置了很多有特殊意义的单词,这些单词不能做为类名、方法名、变量名来使用。关键字必须是小…

Calendar日历类

Calendar 类是一个抽象类,为我们提供了关于日期计算的功能,比如:年、月、日、时、分、秒的展示和计算。 GregorianCalendar 是Canlendar 的子类,表示公历。 注:月份的表示,一月是0,二月是1&am…

【echart】数据可视化+vue+vite遇到问题

1、vue3使用echars图表报错:"Initialize failed:invalid dom" 原因是因为:Dom没有完成加载时,echarts.init() 就已经开始执行了,获取不到Dom,无法进行操作 解决:加个延时 onMounted(async () …

Elasticsearch相关问题

相关问题: 1、Elasticsearch.Net和NEST的区别? Elasticsearch 官方为 .NET 提供了 2 个官方客户端库:Elasticsearch.Net 和 NEST。 Elasticsearch.Net 和 NEST对比说明: 可以简单理解为 Elasticsearch.Net 是 NEST的一个子集。N…

MATLAB:优化与规划问题

一、线性规划 % 线性规划(Linear programming, 简称LP) fcoff -[75 120 90 105]; % 目标函数系数向量 A [9 4 7 54 5 6 105 10 8 53 8 9 77 6 4 8]; % 约束不等式系数矩阵 b [3600 2900 3000 2800 2200]; % 约束不等式右端向量 Aeq []; % 约束等式系…

实验2-spark编程

实验目的 (1)通过实验掌握Spark的基本编程方法; (2)熟悉RDD到DataFrame的转化方法; (3)熟悉利用Spark管理来自不同数据源的数据。 实验内容 1.Spark基本操作 请参照…

[TS面试]TS中如何设计Class声明

TS中如何设计Class声明 class Greeter{greeting: string;constructor(message:string){this.greeting message}getGreeting():string{return this.greeting}sayGreeting():string{return Say ${this.greeting}} } const greeter new Greeter(Hello)

ROUYI框架地址

1、原版系统地址与文档 https://gitee.com/dromara/RuoYi-Cloud-Plus?_fromgitee_search 源码地址 https://plus-doc.dromara.org/#/ruoyi-cloud-plus/home 后端地址 https://plus-doc.dromara.org/#/plus-ui/home 前端地址 前端代码地址: RuoYi-Vue-Plus: 多租户…

maven的依赖继承

先说一下创建子maven工程的步骤 继承 继承的作用:在父工程中,统一管理项目中的依赖信息,进行统一的版本控制 继承的背景是:对一个大型的项目进行了模块拆分,一个project下,创建了很多的module&#xff0c…