React 18版本配置rem 和 vw的详细步骤
更新时间：2024年01月25日 09:54:50 作者：我叫汪枫
这篇文章主要介绍了React 18版本配置rem 和 vw的详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
React 18版本配置rem 和 vw
经过无数次的实验最终发现兼容性比较好的方案是配置webpack.config.js
第一步:
npm install lib-flexible postcss-pxtorem yarn add lib-flexible postcss-pxtorem
第二步:
接下来直接解包-- yarn eject npm run eject
第三步:
这一步也是最关键的一补我们需要配置一下loader
解包后，可以看到项目目录下多了一个 config 文件夹。打开 config/webpack.config.js ：
搜索 postcss-loader ，添加：以下内容
const loaders = [
........,
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
postcssOptions: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
config: false,
plugins: !useTailwind
? [
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
// 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-pxtorem',
{
rootValue: 112.5, //设计图最大宽度除以10 //比如750的宽就写成75 我这边是1125的宽
selectorBlackList: [],
propList: ['*'],
exclude: /node_modules/i
}
],
/* -------添加上面这一段------- ------------------------------------------------*/
'postcss-normalize',
]
: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
/* -------添加下面这一段------------------------------------------------------------ */
[
'postcss-pxtorem',
{
rootValue: 112.5, //设计图最大宽度除以10 //比如750的宽就写成75 我这边是1125的宽
selectorBlackList: [],
propList: ['*'],
exclude: /node_modules/i
}
]
/* -------添加上面这一段------------------------------------------------------------ */
],
},
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
]
注意：这里的 rootValue: 112.5 的意思就是1rem = 112.5px 这个是根据1125px设计稿来的！第四步
在 入口文件 index.js 里引入 lib-flexible： import 'lib-flexible'
重启项目文件
npm run start 或者 yarn start
兼容ipad
但是，当你点开ipad时，会发现盒子兼容出了问题，这是因为淘宝弹性布局方案lib-flexible不兼容ipad和ipad pro。我们这里给出解决方案：
在public>index.html的head标签中添加：
这样，我们就解决ipad的兼容问题了。
7、修改meta标签
这样，我们 rem 的配置就算全部完成了。现在就可以根据设计稿的大小写样式啦，不用转换~~~ 设计稿的尺寸写的是多少直接C/V过来就好了，不需要转换更改
二vw
第一步:
vw 的配置会比 rem 简单很多，前面的基本相同，就后面不需要在配置兼容ipad这些之类的
1、安装依赖包 npm i postcss-px-to-viewport --save-dev 或者 yarn add postcss-px-to-viewport --save-dev 2、解包 这一步和上面配置 rem 的一样，先提交仓库在解包 git add . git commit -m 'eject之前的提交' 解包 yarn eject npm run eject
第二步:
配置loader
解包后打开 config/webpack.config.js 文件夹，搜索 postcss-loader ，添加：
const loaders = [
......
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
postcssOptions: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
config: false,
plugins: !useTailwind
? [
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
/* -------添加下面这一段------- */
require('postcss-px-to-viewport')({
viewportWidth: 1125, // 视口宽度，根据设计图的大小
viewportHeight: 1000, // 视口高度，根据设计图的大小
unitPrecision: 6,// 保留小数点
viewportUnit: 'vw', // 单位
selectorBlackList: [], // 排除的类
minPixelValue: 1, // px的最小单位
mediaQuery: false, // 排除媒体查询
landscapeUnit: 'vw', // 横屏单位
fontViewportUnit: 'vw' // 字体属性单位
}),
/* -------添加上面这一段------- */
// 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,
},
],
/* -------添加下面这一段------- */
require('postcss-px-to-viewport')({
viewportWidth: 1125, // 视口宽度，根据设计图的大小
viewportHeight: 1000, // 视口高度，根据设计图的大小
unitPrecision: 6,// 保留小数点
viewportUnit: 'vw', // 单位
selectorBlackList: [], // 排除的类
minPixelValue: 1, // px的最小单位
mediaQuery: false, // 排除媒体查询
landscapeUnit: 'vw', // 横屏单位
fontViewportUnit: 'vw' // 字体属性单位
}),
/* -------添加上面这一段------- */
],
},
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
]到此这篇关于React 18版本配置rem 和 vw的文章就介绍到这了,更多相关React配置rem 和 vw内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧2022-12-12
这篇文章主要为大家详细介绍了如何使用React前端和Node.js后端实现大文件传输和断点续传的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下2024-12-12
react拖拽react-beautiful-dnd一维数组二维数组拖拽功能
二维数组可以拖拽,但是不可以编辑+拖拽,如果想要实现编辑+拖拽,还是需要转换成一维数组,本文给大家介绍react拖拽react-beautiful-dnd的相关知识,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要给大家介绍了关于react在安卓中输入框被手机键盘遮挡问题的解决方法，文中通过图文以及示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧2018-09-09
这篇文章主要介绍了React反向代理及样式独立详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要为大家详细介绍了React中拆分组件的相关知识,文中的示例代码讲解详细,对我们掌握React有一定的帮助,需要的小伙伴可以参考一下2023-12-12
文章讲述了在使用React时遇到的异步问题导致页面卡顿的情况,通过Promise.all等方法解决了异步操作的顺序问题,使得页面能够正常渲染,感兴趣的朋友跟随小编一起看看吧2026-01-01
这篇文章主要介绍了React添加或移除类的操作方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了React如何利用scheduler思想实现任务的打断与恢复,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下2024-03-03
这篇文章主要介绍了React的组件协同使用,文中给大家提到在React开发中，有哪些场景的组件协同？又如何去实现组件的协同使用呢？本文都给大家提到，感兴趣的朋友跟随小编一起看看吧2021-09-09
最新评论