vue3创建h5 项目使用rem做响应式的配置

第一步 安装依赖:

npm install amfe-flexible -S
npm install postcss-px2rem -S

第二步 main.ts文件中导入

import "amfe-flexible/index.js";

第三步 进行配置:

vue3 项目中创建 postcss.cinfig.js文件,这里是基于设计稿是750px的 如果是375的就写37.5

module.exports = {css: {loaderOptions: {css: {},postcss: {plugins: [require("postcss-px2rem")({remUnit: 75})]}}}
}

vue2 项目进行配置的:找到根目录下的.postcss.js文件

module.exports = {plugins: {'postcss-import': {},'postcss-url': {},// to edit target browsers: use "browserslist" field in package.jsonautoprefixer: {browsers: ['Android >= 4.0', 'iOS >= 7']},'postcss-pxtorem': {// rootValue: 422.4,//对应设计图宽度4224*1296// rootValue: 192,//对应设计图宽度1920*1080rootValue: 75,propList: ['*', '!border*'] //  表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框,这样不会把边框1px变成1rem}}
}

第四步 vscode 安装pxtorem的插件 
第五步: 在项目中直接基于750的设计稿量出尺寸, 然后再将px转化为rem就可以了。

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

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

相关文章

gRPC知识归档

文章目录 gRPC知识归档gRPC原理什么是gRPCgRPC的特性gRPC支持语言gRPC使用场景gRPC设计的动机和原则 数据封装和数据传输问题网络传输中的内容封装和数据体积问题JSONProtobuf(微服务之间的服务器调用,一般采用二进制序列化,比如protobuf&…

【airtest】自动化入门教程(二)airtest操作

目录 一、touch 二、wait 三、swipe 四、exists 五、text 六、keyevent 七、snapshot 八、sleep 九、断言 9.1 assert_exists 9.2 assert_not_exists 9.3 assert_equal 9.4 assert_not_equal 前言:本文主要针对aritest部分的基础操作,aritest是一个跨平…

网络编程第二天

1.基于TCP的通信(面向连接的通信) 服务器代码实现&#xff1a; #include <myhead.h> #define IP "192.168.126.91" #define PORT 9999 int main(int argc, const char *argv[]) {//1、创建套接字int sfd-1;if((sfdsocket(AF_INET,SOCK_STREAM,0))-1){perror(…

ES系列之Logstash实战入门

概述 作为ELK技术栈一员&#xff0c;Logstash用于将数据采集到ES&#xff0c;通过简单配置就能把各种外部数据采集到索引中进行保存&#xff0c;可提高数据采集的效率。 原理 数据源提供的数据进入Logstash的管道后需要经过3个阶段&#xff1a; input&#xff1a;负责抽取数…

【ArcPy】批量读取文件夹excel中XY并转为点shp

示例展示 代码 只读取excel中含有XY字段的文件&#xff0c;并将矢量命名为excel文件名称。 import os import pandas as pd import arcpy folder_path r"C:\Users\admin\Desktop\excelfile" extension"xlsx" files [file for file in os.listdir(folder…

SpringCloud gateway限流无效,redis版本低的问题

在使用springCloud gateway的限流功能的时候&#xff0c;配置RedisRateLimiter限流无效&#xff0c;后来发现是Redis版本过低导致的问题&#xff0c;实测 Redis版本为3.0.504时限流无效&#xff0c;改用7.0.x版本的Redis后限流生效。查了资料发现很多人都遇见过这个问题&#x…

RedisTemplate 序列化成功,反序列化失败List, Set, Map失败

RedisTemplate 序列化成功&#xff0c;反序列化失败List, Set, Map失败 异常信息RedisTemplate配置异常原因错误代码示例解决方法 序列化成功&#xff0c;反序列化失败 异常信息 Caused by: com.fasterxml.jackson.databind.exc.InvalidTypeIdException: Could not resolve ty…

小程序事件处理

事件处理 一个应用仅仅只有界面展示是不够的&#xff0c;还需要和用户做交互&#xff0c;例如&#xff1a;响应用户的点击、获取用户输入的值等等&#xff0c;在小程序里边&#xff0c;我们就通过编写 JS 脚本文件来处理用户的操作 1. 事件绑定和事件对象 小程序中绑定事件与…

React之组件定义和事件处理

一、组件的分类 在react中&#xff0c;组件分为函数组件和class组件&#xff0c;也就是无状态组件和有状态组件。 * 更过时候我们应该区别使用无状态组件&#xff0c;因为如果有状态组件会触发生命周期所对应的一些函数 * 一旦触发他生命周期的函数&#xff0c;它就会影响当前项…

如何设置从小程序跳转到其它小程序

​有的商家有多个小程序&#xff0c;希望能够通过一个小程序链接到所有其它小程序&#xff0c;用户可以通过点击跳转链接实现从一个小程序跳转到另一个小程序。要怎么才能实现这样的跳转呢。下面具体介绍。 1. 设置跳转。在小程序管理员后台->分类管理&#xff0c;添加一个…

ssm个人学习01

Spring配置文件: spring环境的搭建: 1:导入对应的spring坐标 也就是依赖 2:编写controller, service, dao相关的代码 3:创建配置文件(在resource下面配置文件) 例如:applicationContext.xml <bean id "" class ""> <property name "&…

工作电压范围宽的国产音频限幅器D2761用于蓝牙音箱,输出噪声最大仅-90dBV

近年来随着相关技术的不断提升&#xff0c;音箱也逐渐从传统的音箱向智能音箱、无线音箱升级。同时在消费升级的背景下&#xff0c;智能音箱成为人们提升生活品质的方式之一。智能音箱是智能化和语音交互技术的产物&#xff0c;具有点歌、购物、控制智能家居设备等功能&#xf…

python水表识别图像识别深度学习 CNN

python水表识别&#xff0c;图像识别深度学习 CNN&#xff0c;Opencv,Keras 重点&#xff1a;项目和文档是本人近期原创所作&#xff01;程序可以将水表图片里面的数据进行深度学习&#xff0c;提取相关信息训练&#xff0c;lw1.3万字重复15%&#xff0c;可以直接上交那种&…

Vue中<style scoped lang=“scss“>的含义

这段代码中的<style scoped lang"scss">是HTML和Vue框架结合使用时常见的一个模式&#xff0c;具体含义如下&#xff1a; scoped&#xff1a;这是一个Vue.js特有的属性&#xff0c;用来指定样式只应用于当前组件的元素。没有这个属性时&#xff0c;样式会全局应…

elasticsearch7.17 terms聚合性能提升90%+

背景 ES7 相比于 ES6 有多个层面的优化&#xff0c;对于开源的ES而言&#xff0c;升级是必经之路。 ES的使用场景非常多&#xff0c;在升级过程中可能会遇到非预期的结果&#xff1b; 比如之前文章提到的典型案例&#xff1a;ES7.17版本terms查询性能问题 ES7.17版本terms查…

【Python笔记-FastAPI】后台任务+WebSocket监控进度

目录 一、代码示例 二、执行说明 (一) 调用任务执行接口 (二) 监控任务进度 实现功能&#xff1a; 注册后台任务&#xff08;如&#xff1a;邮件发送、文件处理等异步场景&#xff0c;不影响接口返回&#xff09;监控后台任务执行进度&#xff08;进度条功能&#xff09;支…

pclpy 点云法线

pclpy 点云法线 一、算法原理1.理论入门2.选择正确的比例 二、代码三、结果四、相关数据 一、算法原理 表面法线是几何表面的重要属性&#xff0c;在许多领域&#xff08;例如计算机图形应用程序&#xff09;中大量使用&#xff0c;以应用正确的光源来生成阴影和其他视觉效果。…

Android 混淆是啥玩意儿?

什么是混淆 Android混淆&#xff0c;是伴随着Android系统的流行而产生的一种Android APP保护技术&#xff0c;用于保护APP不被破解和逆向分析。简单的说&#xff0c;就是将原本正常的项目文件&#xff0c;对其类、方法、字段&#xff0c;重新命名a,b,c…之类的字母&#xff0c…

森林灭火利器|便携式森林消防灭火泵|恒峰智慧科技

随着人们对环境保护意识的不断提高&#xff0c;森林防火工作显得尤为重要。然而&#xff0c;传统的森林灭火方式存在诸多不便&#xff0c;如火势蔓延迅速、灭火效率低下等。为了更好地保护森林资源&#xff0c;科学家们研发出了一种便携式森林消防灭火泵&#xff0c;它的出现为…

利用css实现常见图形

1、正圆形 给正方形盒子设置圆角属性为宽高的50%。 div {width: 100px;height: 100px;background-color: plum;border-radius: 50%; } 2、胶囊形 给长方形盒子设置圆角属性为盒子高度的50%。 div {width: 200px;height: 100px;background-color: plum;border-radius: 50px…