react移动端rem适配

最新推荐文章于 2024-08-15 09:18:57 发布

YaNglIN123i

最新推荐文章于 2024-08-15 09:18:57 发布

阅读量884

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/YaNglIN123i/article/details/127471050

版权

本文档介绍了如何在React项目中通过react-app-rewired配置postcss-px2rem插件，实现将px单位转换为rem，以适配不同设备的字体大小。主要步骤包括安装依赖、创建config-overrides.js文件、修改package.json启动命令，并在src目录下创建rem.js来动态调整根字体大小。

摘要由CSDN通过智能技术生成

1.安装依赖

yarn add postcss-px2rem customize-cra react-app-rewired

2.根目录下建立：config-overrides.js，内容如下

const { override, fixBabelImports,addBabelPlugins } = require('customize-cra');

 module.Exports = override(
          addPostcssPlugins([
            require('postcss-pxtorem')({  
              remUnit: 37.5, // 1rem = 37.5px
            }),
          ]),
        ),

3.修改package.json中的启动命令，如下：

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

4.src目录下建立rem.js,内容如下（给不同设备设置的跟字体大小）

function adapter(){
    // 获取布局视口宽度 
    var width = document.documentElement.clientWidth;
    // 计算跟字体大小
    var fontSize = width / 10;
    // 设置跟字体大小
    document.documentElement.style.fontSize = fontSize + 'px';
}
// 调用
adapter();
// 监听窗口大小改变事件
window.onresize = function(){
    adapter();
}