React中大屏适配

最新推荐文章于 2024-09-14 09:25:55 发布

菜籽叶

最新推荐文章于 2024-09-14 09:25:55 发布

阅读量700

点赞数 22

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/xiaoka__xm/article/details/140012074

版权

首先先下载eject,我们要用到其中的webpack:

npm i eject

在package.json中检查是否下载:

这里原本是有一个eject的运行指令的，运行完后这个指令会自动消失，然后运行 npm run eject 出现下面文件夹：

下载好后，我们开始下载适配插件：npm i postcss-pxtorem amfe-flexible，这个插件的主要作用是将像素（px）单位转换为 rem 单位，从而方便进行响应式设计。

然后开始我们的适配之旅：

在webpack中找到webpack.config文件，里面有个options配置，在里面输入:

require("postcss-pxtorem")({
                  rootValue: 192,
                  unitPrecision: 3,
                  propList: ['*'],
                  mediaQuery: false,
                  exclude: /(node_modules)/,
                  minPixelValue: 1,
                })

rootValue 的作用是指定根元素（通常是 <html> 元素）的 font-size 值（以像素为单位）。当你设置了一个 rootValue 后，postcss-pxtorem 会基于这个值来计算 rem 的大小

最后，在我们的Index.js中调用里一个插件：