react-webApp--响应式布局

rem响应式布局 移动端响应式布局

1.自己实现，需要设计好初始换算比，设为100px方便计算

  
    
    
    
    
    
    
    
    
  

  
    

      
珠峰培训
    
  

原理： 找参照的比例，就是html里font-size的改变

   + 2.react

配置REM响应式布局的处理：lib-flexible、postcss-pxtorem 插件 

lib-flexible 设置REM和PX换算比例的
      + 根据设备宽度的变化自动计算
      + html.style.fontSize=设备的宽度/10+'px';
      + 750设计稿中  1REM=75PX : 初始换算比例
      + 375设备上 1REM=37.5PX
    postcss-pxtorem 可以把我们写的PX单位，按照当时的换算比例，自动转换为REM，不需要我们自己算了
    ----
    @1 假设设计稿还是750的，我们测出来多少尺寸，我们写样式的时候，就写多少尺寸，并且不需要手动转换为REM「我们在webpack中，针对postcss-pxtorem做配置，让插件帮我们自动转换」
       const px2rem = require('postcss-pxtorem');
       px2rem({
         rootValue: 75, // 基于lib-flexible,750设计稿,就会设置为1REM=75PX；此时在webpack编译的时候，我们也需要让px2rem插件，按照1REM=75PX，把我们测出来的并且编写的PX样式，自动转换为REM；
         propList: ['*'] // 对所有文件中的样式都生效{AntdMobile组件库中的样式}
       })
    @2 在入口（index.jsx）中，我们导入lib-flexible，确保在不同的设备上，可以等比例的对REM的换算比例进行缩放！！
    @3 手动设置：设备宽度超过750PX后，不再继续放大！！

@1

@2

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

/* REDUX */
import { Provider } from 'react-redux';
import store from './store';

/* ANTD-MOBILE */
import { ConfigProvider } from 'antd-mobile';
import zhCN from 'antd-mobile/es/locales/zh-CN';

/* 改变REM换算比例 */
import 'lib-flexible';
import './index.less';

/* 处理最大宽度 */
(function () {
  const handleMax = function handleMax() {
    let html = document.documentElement,
      root = document.getElementById('root'),
      deviceW = html.clientWidth;
    root.style.maxWidth = "750px";
    if (deviceW >= 750) {
      // 屏幕宽度超750,不改变保持75px
      html.style.fontSize = '75px';
    }
  };
  handleMax();
})();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
    
  
);