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

react create-react-app v5配置 px2rem （暴露 eject方式）

news 2026/3/28 1:12:37

环境信息：

create-react-app v5
“react”: “^18.2.0”
“postcss-plugin-px2rem”: “^0.8.1”

配置步骤：

我这个方式是 npm run eject 暴露 webpack配置的方法
1.安装 postcss-plugin-px2rem 和 lib-flexible

cnpm install postcss-plugin-px2rem  lib-flexible --save

2.配置config/webpack.config.js
加上这段代码：

//px2rem的配置
const px2rem = require("postcss-plugin-px2rem");
const px2remOpts = {rootValue: 37.5, //这个值定义了1rem应该等于多少像素。在这里，1rem等于37.5exclude: /(node_module)/, //这是一个正则表达式，用于指定哪些文件应该被排除在转换之外。在这里，所有在'node_module'目录下的文件都将被排除。// mediaQuery: false, //这个选项表示是否应该在媒体查询中转换px单位。在这里，它被设置为false，意味着媒体查询中的px单位将不会被转换// minPixelValue: 3, //这个选项表示应该转换的最小px值。在这里，只有px值大于或等于3的才会被转换
};

然后在 getStyleLoaders 里加上配置（搜索 getStyleLoaders），
在 postcss-loader 下的postcssOptions 里加上

[px2rem(px2remOpts)
],

postcss-preset-env 同级别的。
也就是 这个地方看截图：
在这里插入图片描述

这一段完整的代码：

      {// Options for PostCSS as we reference these options twice// Adds vendor prefixing based on your specified browser support in// package.jsonloader: require.resolve('postcss-loader'),options: {postcssOptions: {// Necessary for external CSS imports to work// https://github.com/facebook/create-react-app/issues/2677ident: 'postcss',config: false,plugins: !useTailwind? ['postcss-flexbugs-fixes',['postcss-preset-env',{autoprefixer: {flexbox: 'no-2009',},stage: 3,},],[px2rem(px2remOpts)],// Adds PostCSS Normalize as the reset css with default options,// so that it honors browserslist config in package.json// which in turn let's users customize the target behavior as per their needs.'postcss-normalize',]: ['tailwindcss','postcss-flexbugs-fixes',['postcss-preset-env',{autoprefixer: {flexbox: 'no-2009',},stage: 3,},],],},sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,}}

3.在 src/index.js（入口文件引入 import ‘lib-flexible’; ）
入口文件引入 import 'lib-flexible';
4.public/index.html 里 注释调 meta 和加上 一段兼容ipad和ipad pro 的兼容代码。

注释掉（注释的原因是 lib-flexible 会自动创建 meta）：

<meta name="viewport" content="width=device-width, initial-scale=1" />

在 head里加上(ipad和ipad pro )：

<!-- 淘宝弹性布局方案lib-flexible不兼容ipad和ipad pro的解决方法 --><script>/(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));</script>

这段代码用于检测用户是否正在使用iPhone、iPad、iPod或iOS等苹果设备。如果是，它将创建一个新的视口元标签，并添加到HTML文档的头部。视口元标签的内容设置为 ‘target-densitydpi=device-dpi, width=480px, user-scalable=no’，这意味着它会尝试让页面在各种设备上看起来相似，页面的宽度被设置为480px，并且用户不能手动缩放页面。

我的 index.html 代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> --><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><!--manifest.json provides metadata used when your web app is installed on auser's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/--><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><!--Notice the use of %PUBLIC_URL% in the tags above.It will be replaced with the URL of the `public` folder during the build.Only files inside the `public` folder can be referenced from the HTML.Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" willwork correctly both with client-side routing and a non-root public URL.Learn how to configure a non-root public URL by running `npm run build`.--><title>React App</title><!-- 淘宝弹性布局方案lib-flexible不兼容ipad和ipad pro的解决方法 --><script>/(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));</script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><!--This HTML file is a template.If you open it directly in the browser, you will see an empty page.You can add webfonts, meta tags, or analytics to this file.The build step will place the bundled scripts into the <body> tag.To begin the development, run `npm start` or `yarn start`.To create a production bundle, use `npm run build` or `yarn build`.--></body></html>

index.html截图
5.重新运行 npm start 审查元素 看看 px 是不是被转换成了rem。如果转换成功说明，配置成功了。
可以在 App.js 里加上一个div然后在 App.css 里写上一个width,height然后 用到 div上。

.box{width: 100px;height: 100px;background: red;
}

测试代码
运行之后的效果截图：
从100px转换成了1.333rem ，当切换时，他也跟着变大变小。
运行后的效果截图

相关文章：

react create-react-app v5配置 px2rem （暴露 eject方式）

环境信息&#xff1a; create-react-app v5 “react”: “^18.2.0” “postcss-plugin-px2rem”: “^0.8.1” 配置步骤&#xff1a; 我这个方式是 npm run eject 暴露 webpack配置的方法 1.安装 postcss-plugin-px2rem 和 lib-flexible cnpm install postcss-plugin-px2rem…...

编程日记 2023/10/3 14:58:25

AVL树的实现及原理

目录 AVL树的由来 AVL的实现原理 左单旋 右单旋 先左后右 先右后左 总结 AVL树的由来 查找&#xff0c;无论在什么情况下都与我们息息相关。在我们学习数组阶段学习到了线性查找&#xff0c;可是它的效率很低下&#xff0c;又演变出来了二分查找&#xff0c;它的效率非常…...

编程日记 2023/10/3 14:57:24

NestJs和Vite使用monorepo管理项目中,需要使用共享的文件夹步骤

NestJs和Vite使用monorepo管理项目中,需要使用共享的文件夹步骤 1 首先需要将nest-cli打包的功能通过webpack接管 nest-cli.json文件内容 {"$schema": "https://json.schemastore.org/nest-cli","collection": "nestjs/schematics",…...

编程日记 2023/10/3 14:56:23

我用PYQT5做的第一个实用的上位机项目（三）

基本的程序框架&#xff1a; 因为自己不是专业的程序员&#xff0c;只是一个搞电气控制的“票友”&#xff0c;所以尽量减少手动输入 代码量&#xff0c;能在Qt Dsigner里面完成的组态就不要放在代码里面完成。 在框架的建设方面&#xff0c;尽量做到集中和整合&#xff0c;位…...

编程日记 2023/10/3 14:54:21

代谢组学分析平台（二）

GC/MS分析生物样本为何要衍生化处理&#xff1f;有哪些衍生化的方法&#xff1f; GC的流动相为气体&#xff08;通常为高纯氦&#xff09;&#xff0c;这就要求被分析物必须能够气化&#xff0c;而生物样本中很多内源性代谢物都含有极性基团&#xff0c;具有沸点高、不易气化特…...

编程日记 2023/10/3 14:53:21

【统计学】Top-down自上而下的角度模型召回率recall，精确率precision，特异性specificity，模型评价

最近在学 logistic regression model&#xff0c;又遇见了几个之前的老面孔。 召回率recall, 精确率precision&#xff0c;特异性spcificity&#xff0c;准确率accuracy&#xff0c;True positive rate&#xff0c;false positive rate等等名词在学习之初遇到的困难在于&#x…...

编程日记 2023/10/3 14:51:19

AutoDL使用tensorboard

目录 一&#xff0c;训练形成log文件 二. 切换logs目录 三&#xff0c;在AutoPanel中访问TensorBoard 一&#xff0c;训练形成log文件 例子&#xff1a; from torch.utils.tensorboard import SummaryWriter import numpy as npwriter SummaryWriter() for x in range(1, …...

编程日记 2023/10/3 14:48:16

代谢组学分析手段（一）

核磁共振技术&#xff08;Nuclear Magnetic Resonance, NMR&#xff09; 定义&#xff1a;指核磁矩不为零的原子核在外磁场的作用下&#xff0c;核自旋能级发生塞曼分裂&#xff0c;共振吸收某一特定频率的射频辐射的物理过程。 优点&#xff1a; &#xff08;1&#xff09;…...

编程日记 2023/10/3 14:43:12

网络基础入门（网络基础概念详解）

本篇文章主要是对网络初学的概念进行解释&#xff0c;可以让你对网络有一个大概整体的认知。 文章目录 一、简单认识网络 1、1 什么是网络 1、2 网络分类 二、网络模型 2、1OSI七层模型 2、1、1 简单认识协议 2、1、2 OSI七层模型解释 2、2 TCP/IP五层(或四层)模型 三、网络传…...

编程日记 2023/10/3 14:41:11

简化任务调度与管理：详解XXL-Job及Docker Compose安装

在现代应用程序开发中&#xff0c;任务调度和管理是至关重要的一部分。XXL-Job是一个强大的分布式任务调度平台&#xff0c;它使得任务的调度和管理变得更加轻松和高效。本文将介绍XXL-Job的基本概念&#xff0c;并详细演示如何使用Docker Compose进行快速安装和配置。 什么是X…...

编程日记 2023/10/3 14:40:09

QByteArray字节数组

QByteArray字节数组 文章目录 QByteArray字节数组1.1 QByteArray类基本使用说明1.2 设置数组字节大小1.3 返回数组大小1.4 将数据转为其他类型1.5 将数据转为C语言的字符指针返回1.6 数组数据追加1.7 清除数组数据为指定值1.8 数组数据插入1.9 删除指定位置指定长度的数据1.10 …...

编程日记 2023/10/3 14:38:07

ubuntu20.04.3中qt程序界面嵌套另一个qt界面

先上代码 #include "mainwindow.h" #include <QApplication> #include <iostream> using namespace std; #ifdef _WIN32// Windows 平台的代码 #include <windows.h> #elif __linux__// Linux 平台的代码// ...#include <X11/Xlib.h> #else…...

编程日记 2023/10/3 14:37:06

【chainlit】使用chainlit部署chatgpt

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…...

编程日记 2023/10/3 14:34:03

测开 | Vue速查知识点

文章目录 Vue知识1. Vue 概述2. Vue 代码格式3. Vue 指令3.1 v-bind & v-model3.2 v-on3.3 v-if和v-show3.4 v-for 4. 生命周期 Vue知识 1. Vue 概述 简介&#xff1a; Vue.js&#xff08;读音 /vjuː/, 类似于 view&#xff09; 是一套构建用户界面的 渐进式框架。与其他…...

编程日记 2023/10/3 14:32:01

数据结构——二叉树的基本概念及顺序存储（堆）

目录 一.前言 二.树概念及结构 2.1 树的概念 2.2 树的相关概念 2.3 树的表现 2.4 树在实际中的应用&#xff08;表示文件系统的目录树结构&#xff09; 三.二叉树的概念及结构 3.1 概念 3.2 特殊的二叉树 3.3 二叉树的性质 3.4 二叉树的存储结构 3.4.1 顺序存储 3…...

编程日记 2023/10/3 14:31:01

acwing算法基础之基础算法--整数二分算法

目录 1 知识点2 代码模板 1 知识点 有单调性一定可以二分&#xff0c;但在某些情况下&#xff0c;不具有单调性也可以二分。 单调性也可以抽象成某类性质&#xff0c;分界点左边不满足此性质&#xff0c;而右边满足此性质。当然也可以分界点左边满足此性质&#xff0c;而右边不…...

编程日记 2023/10/3 14:28:58

windows C 开发

在win下用C/C开发 非图形界面 应用程序 基础环境包括3个内容1. API : 一般是系统(包括c标准库和其他dll)提供的2. 编译器 : 可以是gnu的,可以是微软提供的3. 编辑器 : 随意都可以 // 不再考虑范围开发方式(API编译器) 原生windows API 使用 Windows API 来编写非视窗代码。…...

编程日记 2023/10/3 14:26:56

C语言——动态内存管理详解（内存结构、动态内存函数、易错题、柔性数组）

本篇概要 本篇文章从基本出发讲述为什么要存在动态内存分配&#xff0c;动态内存函数有哪些&#xff0c;常见的动态内存错误&#xff0c;一些关于内存分配的练习题以及柔性数组的相关知识。 文章目录 本篇概要1.为什么存在动态内存分配1.1为什么要动态分配内存1.2内存结构 2.常…...

编程日记 2023/10/3 14:24:54

2023年全国控制科学与工程学科评估结果 - 自动化考研

考研选择学校时&#xff0c;控制科学与工程考研学校排名情况怎样是广大考研学子十分关心的问题&#xff0c;以下是我们自动化考研联盟为大家整理得最新控制科学与工程学科评估结果情况&#xff0c;还比较权威&#xff0c;供大家参考。 最后祝大家一战成硕,有其他问题欢迎评论区…...

编程日记 2023/10/3 14:22:53

React wangEditor5 使用说明

1、支持包安装 yarn add wangeditor/editor # 或者 npm install wangeditor/editor --saveyarn add wangeditor/editor-for-react # 或者 npm install wangeditor/editor-for-react --save2、使用 import wangeditor/editor/dist/css/style.css // 引入 cssimport { useState…...

编程日记 2023/10/3 14:18:48

P15800 [GESP202603 六级] 选数

[GESP202603 六级] 选数 https://www.bilibili.com/video/BV1nCAEz2E1q/ P15800 [GESP202603 六级] 选数-信息学奥赛GESP等级考试真题解析 https://www.bilibili.com/video/BV14PwXzEEWL/ 202603GESP六级C第题1选数 https://www.bilibili.com/video/BV19nAnzgEt5/ P15800 [GESP…...

编程新知 2026/3/28 0:53:34

移动端语音交互避坑指南：录音超时截取、倒计时提醒与MP3转换的完整方案

移动端语音交互避坑指南&#xff1a;录音超时截取、倒计时提醒与MP3转换的完整方案 在即时通讯和语音输入场景中&#xff0c;流畅的录音体验直接影响用户留存。数据显示&#xff0c;超过83%的用户会因为录音功能卡顿或操作复杂而放弃使用语音功能。本文将深入解析三个关键体验优…...

编程新知 2026/3/28 0:47:33

避坑指南：Pyannote3.1+Whisper本地部署的5个常见报错解决方案

避坑指南&#xff1a;Pyannote3.1Whisper本地部署的5个常见报错解决方案 语音处理技术正在重塑教育、会议记录和客服质检等场景的交互方式。当开发者尝试将Whisper的精准语音识别与Pyannote的说话人分离能力结合时&#xff0c;常会在环境配置环节遭遇"拦路虎"。本文…...

编程新知 2026/3/27 23:59:08

别死记硬背了！用Python的NumPy库，5分钟搞定线性代数里的矩阵运算（附代码）

用Python的NumPy库轻松玩转线性代数&#xff1a;矩阵运算实战指南 线性代数作为现代科学与工程的基石&#xff0c;在机器学习、计算机图形学、量化金融等领域无处不在。但传统教材中抽象的数学符号和繁琐的手工计算&#xff0c;往往让学习者望而生畏。今天&#xff0c;我们将用…...

编程新知 2026/3/27 22:42:23

PlayCover如何重塑Mac游戏体验？社交与云服务革新玩法深度解析

PlayCover如何重塑Mac游戏体验&#xff1f;社交与云服务革新玩法深度解析 【免费下载链接】PlayCover Community fork of PlayCover 项目地址: https://gitcode.com/gh_mirrors/pl/PlayCover PlayCover作为一款开源的Mac iOS模拟器&#xff0c;通过深度整合Discord社交功…...

编程新知 2026/3/27 21:56:02

OpenCV4编译后pkg-config失效？教你如何正确生成opencv4.pc文件（附完整CMake参数）

OpenCV4编译实战&#xff1a;从源码构建到pkg-config配置全解析 在Linux环境下从源码编译OpenCV4是许多计算机视觉开发者的必经之路&#xff0c;但不少人在成功编译后却发现pkg-config --modversion opencv命令报错"找不到opencv包"。这并非你的操作失误&#xff0c;…...

编程新知 2026/3/27 20:29:33

Wan2.2-I2V-A14B镜像免配置实战：开箱即用，省去PyTorch/CUDA环境冲突烦恼

Wan2.2-I2V-A14B镜像免配置实战&#xff1a;开箱即用&#xff0c;省去PyTorch/CUDA环境冲突烦恼 1. 镜像概述与核心优势 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像&#xff0c;基于RTX 4090D 24GB显存显卡和CUDA 12.4环境深度定制。这个镜像的最大特点是开箱…...

编程新知 2026/3/27 20:23:30

SELF-REFINE in Action: Enhancing LLM Outputs Through Iterative Self-Feedback

1. 什么是SELF-REFINE&#xff1f;为什么LLM需要自我迭代&#xff1f; 想象一下你正在写一封重要邮件。第一稿可能直接了当但缺乏礼貌&#xff0c;经过几次修改后&#xff0c;措辞变得更加得体。这就是人类通过自我反馈不断完善的过程。现在&#xff0c;大型语言模型&#xff0…...

编程新知 2026/3/27 19:51:03

2026年AI前20岗位薪酬出炉！搞AI大模型的远超同行？

AI相关&#xff0c;细分技术领域&#xff0c;薪资前20岗位&#xff0c;都有哪些。 今天这篇文章与铁铁们分享一下。 1 薪资榜单 如下图所示&#xff0c;排名第一&#xff1a;深度学习算法工程师&#xff0c;平均月薪达到3万1千&#xff1b; 排名第二的架构师&#xff0c;薪资与…...

编程新知 2026/3/27 19:32:54

提升钱包开发效率：用快马AI一键生成imToken风格的高复用UI组件

提升钱包开发效率&#xff1a;用快马AI一键生成imToken风格的高复用UI组件 开发钱包类应用时&#xff0c;最让人头疼的就是那些重复性的UI组件和交互逻辑。每次新项目都要从零开始写资产卡片、交易记录列表、二维码弹窗这些基础组件&#xff0c;不仅耗时耗力&#xff0c;还容易…...

编程新知 2026/3/27 18:26:32