React的Web端自适应布局（rem+flex）

React的Web端自适应布局（rem+flex）

搭好react项目后开始画页面的时候才发现react不支持百分比布局，mmp!
后来经过一系列的调查后，决定使用rem自适应布局，

rem（font size of the root element）是指相对于根元素的字体大小的单位。

原理
通过js代码换算出各个屏幕的字体大小，然后1rem会等于换算出的字体大小，从而达到自适应的目的

用法
在js中引入换算算法

!(function(doc, win) {
   
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
   
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };

    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);

H5上添加mata标签

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

flex就不用说了，我直接贴我整理的css代码

.rowCenter{
display:flex;flex-direction:row;justify-content:center;
align-items:center;
}
.rowCenterStart{
display:flex;flex-direction: