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&…

精读《React Hooks 最佳实践》

简介 React 16.8 于 2019.2 正式发布,这是一个能提升代码质量和开发效率的特性,笔者就抛砖引玉先列出一些实践点,希望得到大家进一步讨论。 然而需要理解的是,没有一个完美的最佳实践规范,对一个高效团队来说&#x…

【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(…

LeetCode 76 最小覆盖字串

LeetCode 76 最小覆盖字串 在本篇博客中&#xff0c;我们将探讨LeetCode上的一道算法题目——“最小覆盖子串”。这道题的主要目标是找到字符串s中包含字符串t中所有字符的最小子串。 问题描述 给定字符串s和t&#xff0c;要求在字符串s中找到一个最小的子串&#xff0c;使得…

5.36 BCC工具之ucalls.py解读

一,工具简介 ucalls工具总结了包括Java、Perl、PHP、Python、Ruby、Tcl和Linux系统调用在内的各种高级语言中的方法调用。它显示最常调用方法的统计信息,以及这些方法的延迟(持续时间)。 通过系统调用支持,ucalls可以提供关于进程与系统交互的基本信息,包括系统调用计数…

ES系列之Logstash实战入门

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

C#单向链表实现:在当前节点后插入新数据的方法Insert()

目录 一、涉及到的知识点 1.插入算法 2.示例中current 和 _current 的作用 3.current 和 _current 能否合并为一个变量 4.单向链表节点类的三个属性 &#xff08;1&#xff09;Next属性&#xff1a; &#xff08;2&#xff09; Value属性&#xff1a; &#xff08;3&am…

【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 "&…

Node.js 中 fs 模块文件操作的应用教程

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;它可以让 JavaScript 代码在服务器端运行。在 Node.js 中&#xff0c;fs 模块是用来处理文件系统操作的模块。通过 fs 模块&#xff0c;我们可以进行文件的读取、写入、删除等操作。本教程将介绍如何在 No…

工作电压范围宽的国产音频限幅器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;样式会全局应…

python给企微发消息

方法一&#xff1a;webhook方式。使用群机器人给企微群发消息 import requestsdef qwxsendmessage(msg):urlhttps://qyapi.weixin.qq.com/cgi-bin/webhook/send?key6c598840-804a-4eb5-a999-a023313 #url换成自己群机器人的webhookurldata{msgtype:text,text:{content:msg}}…