移动端的React项目中如何配置自适应和px转rem

2024-03-02 18:04

本文主要是介绍移动端的React项目中如何配置自适应和px转rem,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

创建项目

create-react-app project-name

启动项目

npm start

下载自适应和px转rem的插件

自适应的:    npm install lib-flexible --save

px转rem的:npm install postcss-pxtorem@5.1.1 --save-dev

创建craco.config.js配置文件

在package.json中配置craco

"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "craco eject"}

在craco.config.js文件中配置 postcss-pxtorem

const path = require('path')module.exports = {// 配置@符号的webpack: {alias: {'@': path.join(__dirname, 'src')}},style: {// 配置postcss-pxtorempostcss: {mode: 'extends',loaderOptions: {postcssOptions: {ident: 'postcss',plugins: [['postcss-pxtorem',{rootValue: 375 / 10, // 根元素字体大小// propList: ['width', 'height']propList: ['*']},],],},},},},
}

这篇关于移动端的React项目中如何配置自适应和px转rem的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/766980

相关文章

Gitlab的安装及配置

1、安装与配置 1)配置yum源 在 /etc/yum.repos.d/ 下新建 gitlab-ce.repo vi /etc/yum.repos.d/ gitlab-ce.repo 写入如下内容 [gitlab-ce]name=gitlab-cebaseurl=https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/Repo_gpgc

Springboot项目打包Docker镜像并设置启动参数

ENTRYPOINT设置运行时参数 FROM java:8 MAINTAINER zgy<zgy@123.com>WORKDIR /usr/local/appCOPY *.jar app.jarEXPOSE 8080 ENTRYPOINT ["java", "-Dspring.profiles.active=${SPRING_PROFILES_ACTIVE}", "-jar", "app.j

jeecg配置nginx websocket 转发

map $http_upgrade $connection_upgrade {default upgrade;'' close;}#配置转发ws请求 location ^~ /jeecg-boot/websocket {proxy_pass http://192.168.1.65:9090/jeecg-boot/websocket;add_header Access-Control-Allow

ant-vue-desgin + nginx(项目站点) +nginx(门户站点)

1、主站点方向代理test指向项目服务器 主站点反向代理配置 server {listen 80;server_name www.main.com;#charset koi8-r;#access_log logs/host.access.log main; index index.html;root ./html; #反向代理test指向项目服务器location /tes

vue + nginx 反向代理配置方法二

1、vue.config.js 设置publicPath路径为反向代理路径: publicPath: ‘/test/’, module.exports = {/*Vue-cli3:Crashed when using Webpack `import()` #2463https://github.com/vuejs/vue-cli/issues/2463*/// 如果你不需要生产环境的 sour

vue+element作用域插槽

作用域插槽的样式由父组件决定,内容却由子组件控制。 在el-table使用作用域插槽 <el-table><el-table-column slot-scope=" { row, column, $index }"></el-table-column></el-table> 在el-tree使用作用域插槽 <el-tree><span class="custom-tree-node" s

【网络编程】web服务器shttpd源码剖析——命令行和文件配置解析

hello !大家好呀! 欢迎大家来到我的网络编程系列之web服务器shttpd源码剖析——命令行解析,在这篇文章中,你将会学习到在Linux内核中如何创建一个自己的并发服务器shttpd,并且我会给出源码进行剖析,以及手绘UML图来帮助大家来理解,希望能让大家更能了解网络编程技术!!! 希望这篇文章能对你有所帮助,大家要是觉得我写的不错的话,那就点点免费的小爱心吧!

基于springboot实现人口老龄化社区服务与管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现人口老龄化社区服务与管理系统演示 摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了人口老龄化社区服务与管理平台的开发全过程。通过分析人口老龄化社区服务与管理平台方面的不足,创建了一个计算机管理人口老龄化社区服务与管理平台的方案。文章介绍了人口老龄化社区服务与管理平台的系统分析部分,包括可行性分析等,系统设计部

深入理解JVM中的G1垃圾收集器原理、过程和参数配置

码到三十五 : 个人主页 心中有诗画,指尖舞代码,目光览世界,步履越千山,人间尽值得 ! 在Java虚拟机(JVM)中,垃圾收集(GC)是一个自动管理内存的过程,旨在回收不再使用的对象所占用的内存空间。G1垃圾收集器(G1 GC)是JVM中的一种重要垃圾收集器,尤其适用于需要低延迟和可预测停顿时间的大型应用程序。本文将深入探讨G1垃圾收集器的工作原理、关键特性和性

快速构建项目神器-Docker

篇提到了中小企业快速构建云上服务,本篇继续以开发的视角介绍一个容器化工具:Docker,以下部分摘自百度百科!本文算是一篇技术科普文,对实操上没有太大价值,但是可以告诉你Docker能用在什么地方,怎么使用。 序:上篇提到了中小企业快速构建云上服务,本篇继续以开发的视角介绍一个容器化工具:Docker,以下部分摘自百度百科!本文算是一篇技术科普文,对实操上没有太大价值,但是可以告诉你Docker