React按设计图比例设置样式

设计图和设备的比例 = 设备宽 / 设计图宽
所有的宽、高、字体大小，都需要使用Number类型
在下方组件中你需要设置(design_width)设计图宽，和(font_family)css字体，你也可以在你的组件中单独设置字体

/** 样式
  <div style={styles.main}></div>
  const styles = StyleShell({
        main:{
            height:100,
            width:500,
            fontSize:15,
            lineHeight:'$f15'
            color:'$125'
        }
    })
 */
const StyleShell = (JSON) => {
    const design_width = 750;//设置设计图宽度
    const font_family = 'Arial,"Microsoft Yahei","微软雅黑"';//设置CSS字体

    const GWidth = document.body.offsetWidth;
    const WLR = GWidth / design_width;
    /** 默认样式 */
    const globals = {
        $125: `rgba(125,125,125,1)`,
        $f15: 15
    }
    for (const objects in JSON) {
        JSON[objects].fontFamily = font_family;
        for (const key in JSON[objects]) {
            if (key === 'lineHeight') {
                JSON[objects]['lineHeight'] = `${JSON[objects][key] * WLR}px`;
            } else if (typeof JSON[objects][key] === 'number') {
                JSON[objects][key] = JSON[objects][key] * WLR;
            } else if (JSON[objects][key] in globals) {
                JSON[objects][key] = globals[JSON[objects][key]]
            }
        }
      }
      return JSON;
    }
    export {
      StyleShell
    }