react大屏项目使用rem

一、添加rem.js文件

在公共文件夹中创建rem.js文件，配置rem计算功能

export default function() {
    (function(win, lib) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var tid;
        win.flexible = lib.flexible || (lib.flexible = {});
        console.log(doc);
        console.log(docEl);
        function refreshRem(){
            var width = docEl.getBoundingClientRect().width>4600?docEl.getBoundingClientRect().width:4600
            var rem = width / 10;
            docEl.style.fontSize = rem + 'px';
        }
        win.addEventListener('resize', function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }, false);
        win.addEventListener('pageshow', function(e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
        refreshRem();
    })(global.window, global.window['lib'] || (global.window['lib'] = {}));
}

二、引入rem.js

在index.html（可选其他文件）引入rem.js

import React from 'react';
import { withRouter, Link } from 'react-router-dom';
import rem from '@utils/rem';
import './index.less';

class BaseComponents extends React.Component {
	componentDidMount = () => {
        rem();
    }
	render() {
	<div className={'mainBox'}>
		<div className={'conentBox'}>123</div>
	</div>}
}
export default withRouter(BaseComponents);

三、使用less编辑样式

@rem: 288rem; //  根据设计稿等比缩放;(设计稿宽度为2880px)

.mainBox{
  	height: 540/@rem;
   	width: 1920/@rem;
   	fontsize：18/@rem；// 根据设计稿计算(设计稿为18px)
   	padding: 10px;
  	background：lightblue；
   	.conentBox{
   		background：lightcoral；
   	}
  }