react移动端rem适配

最新推荐文章于 2024-04-20 07:29:38 发布

YaNglIN123i

最新推荐文章于 2024-04-20 07:29:38 发布

阅读量802

点赞数

文章标签： react.js 前端 javascript

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

版权

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();
}