React 配置px转rem
1、npm run eject 暴露配置文件
由于react默认隐藏webpack配置需要手动显示。首先执行命令显示webpack配置
执行命令：npm run eject 将config文件夹显示出来
！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下
git add .
git commit -m '自定义名'
npm run eject
2、安装依赖
npm i lib-flexible --save
npm i postcss-px2rem --save
3、 引入
在项目入口文件index.js引入lib-flexible
import 'lib-flexible';
4、修改webpack.config.js
先引入：
const pxtorem = require('postcss-pxtorem')
5、 然后找到搜索 postcss-loader ，复制下面代码替换整个花 括号
{loader: require.resolve('postcss-loader'),options: {ident: 'postcss',plugins: () => [require('postcss-flexbugs-fixes'),require('postcss-preset-env')({autoprefixer: {flexbox: 'no-2009',},stage: 3,}),postcssNormalize(),// 新增加---------------------------------------------pxtorem({rootValue: 37.5, propWhiteList: [],minPixelValue: 2,exclude: /node_modules/i})//--------------------------------------------------],sourceMap: isEnvProduction && shouldUseSourceMap,},
},
6、重启项目
npm start
7、报错解决
如果报错：Error: Cannot find module 'postcss-pxtorem'因为postcss-pxtorem最高也才6.0.0版本（就2021年5月31日来说是6.0.0，往后就不知道了），只需下载指定5.1.1版本的postcss-pxtorem就行了
npm install postcss-pxtorem@5.1.1 --save-dev8、再次重启项目，报错解决
npm start
9、到这里其实还会遇到一个bug,就是元素转换的rem对了，但是展示的效果却不一样，这是因为我们没有设置根标签默认的字体大小,这里有一个根据不同设备会设置根标签的默认字体大小，只要引进你的react入口文件就好了
(function flexible (window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize = '16px'} else {/*DOMContentLoaded DOM元素加载完成就触发load 页面所有资源加载触发*/document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 100function setRemUnit () {var rem = docEl.clientWidth / 100docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))10、完---
React 配置px转rem相关推荐
- react中px转rem（px2rem和px to rem rpx的使用）
.比如设计稿是750px,假设根元素字体大小设置为100px,则1rem = 100px;所以为了适应各种屏幕尺寸:一般设置根元素font-size 为 屏幕宽度/UI设计图宽度 *100+'px', ...
- 新版react中px转rem
1.安装postcss-pxtorem npm i lib-flexible postcss-pxtorem -s 2.在src目录下index.js里引入lib-flexible import &q ...
- 适配移动端配置px2rem（自动将px转rem）
vue配置px2rem 1.安装 npm install px2rem-loader lib-flexible –save 2.在项目入口文件main.js中引入lib-flexible import ...
- vue项目转rem；H5配置rem；px转rem
H5可以配合vant组件库书写项目,和使用rem后vant组件样式变小了解决办法.(引入方式) 以下是配置rem步骤: 1.安装 flexible和 postcss-px2rem(命令行安装) lib ...
- webpack4+react配置多页面移动端应用程序
webpack4+react配置多页面移动端应用程序 前言 技术栈 项目目录结构 移动端适配方案 webpack配置 基础配置 开发环境配置 react+redux热重载 生产环境配置 .babelr ...
- Vue项目自动转换 px 为 rem，高保真还原设计图
技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通 ...
- Sublime 插件- px 转rem
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 克隆项目 https://github.com/hyb628/cssrem.git 进入packag ...
- 移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案 说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...
- 将已写好页面的px转化为rem（px to rem）
将已写好页面的px转化为rem(px to rem) 1.px/rem单位 px:pixel的缩写,像素的意思 rem : 是一个相对单位,1rem等于根元素的font-size值 2.为什么要实现p ...
最新文章
- Linux软件管理器（如何使用软件管理器来管理软件）
- $.ajax 发送请求,JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)
- 使用axios上传照片
- sklearn自学指南(part40)--使用手册的目录
- 将表中的数据自动生成INSERT、UPDATE语句
- 数据库创建(利用写好的数据库表生成创建表的sql语句+利用生成的数据库创建表加同步数据sql)
- 计算机工作对身体有害吗,在电脑前长时间工作会对身体有害处吗？
- c语言第六次实验报告,第一年C语言实验报告6列
- 电商C4D素材，玩转立体作品不是问题
- Linux查看当前系统的版本信息
- html----选项卡自动切换以及鼠标悬停时停止（js）
- JS魔法堂：LINK元素深入详解
- 清空oracle的注册表,一键清除 Oracle注册表.bat
- 基于VB的员工请假管理系统设计与实现
- 用python判断素数_python判断素数
- 手机端解决2倍图3倍图自适应
- html项目符号实心圆圈,HTML基础 ul type 项目符号为圆圈与方块
- JSP统计网站访问人数
- 好吧！ 阿达 奥古尼斯
- 初中英语多词性单词怎么办_初中英语单词巧记方法