React移动端适配

创建项目

修改App.jsx（即App.js）文件

import './App.css';
import './App.less'
import './tools/rem'

function App() {
  return (
    <div className="App">
        <div className="demo">
          这是一个项目
        </div>
    </div>
  );
}

export default App;

修改App.less文件

 /* Less */
 @color: #999;
 @bgColor: skyblue;//不要添加引号
//  @width: 80%;
.demo{
    color: @color;
    background-color: @bgColor;
    width: 675px;
    height: 50px;
    margin: 0 auto;
    text-align: center;
}

css文件内容（过会不用）

.demo{
  color: #999;
  background-color: skyblue;
  width: 500px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
}

效果展示

手机展示

iPad展示

安装依赖

安装依赖1

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

安装依赖2

yarn add @craco/craco

安装依赖3

yarn add craco-less

安装依赖4

yarn add babel-plugin-import

根目录下建立config-overrides.js

const { override, fixBabelImports, addPostcssPlugins, addLessLoader } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
  addPostcssPlugins(
      [
          require("postcss-px2rem")({remUnit:375/10})
      ]
  )
);

更改package.json启动命令

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

编写js文件并且引用

根据我个人习惯，src下创建了文件夹，文件夹写的js文件
src->tools->rem.js

function adapter() {
  // 获取手机横向的设备独立像素
  const dip = document.documentElement.clientWidth
  //计算根字体大小（100是根据我们自己指定的，375是设计稿宽度）
  const rootFontSize = dip / 20
  // 设置根字体
  document.documentElement.style.fontSize = rootFontSize + 'px'
}
adapter()
window.onresize = adapter

写完后在App.js文件引用

import './tools/rem'

断开css引入，用less效果不变

适配方法很多，这是其中一种react的适配方法，通过调用库进行实现，这种方法可以写px直接映射rem。中间引用了几个其他库，是为了完成less引用。
本次分享了less引入与移动端适配。