数据大屏rem适配解决方案-flexible

1、rem适配原理

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们
前端常说的适配单位rem。因为rem的特性相对长度单位，常被用来做移动适配，pc端页面不推荐使用rem。

function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

项目起来可以看到

这里就可以设置vscode插件，就可以在写代码自动转换px到rem。

2、安装flexible

npm install lib-flexible --save

安装成功后，在项目入口文件main.js中添加如下代码，引入flexible：

3、大屏使用实例

react

import React from "react";
import { connect } from "dva";
import { Button } from "antd-mobile";
import { superview } from "../../../core";
import { homepage } from "../models";

class HomePage extends superview {
  namespace = homepage.namespace;
  headerContent = "首页";
  isroot = true;
  render() {
    var width = window.document.documentElement.getBoundingClientRect().width;
    if (width / 1 > 540) {
        width = 540 * 1;
    }
    var rem = width / 10;
  
    return <div className="screen">
      <div className="column column-left">
        <div className="column-row-1">789</div>
        <div className="column-row-1">654</div>
        <div className="column-row-1">123</div>
      </div>
      <div className="column column-center">256</div>
      <div className="column column-right">
      <div className="column-row-1">789</div>
        <div className="column-row-2">654</div>
      </div>

    </div>;
  }
}

HomePage.propTypes = {
  datas: [1, 2, 3, 4],
};

export default connect(({ homepage }) => ({
  homepage,
}))(HomePage);

css

.screen {
  display: flex;
  height: 100%;
  .column {
    height: 100%;
    .column-row-1 {
      min-height: 1.5789rem;
      height: 33.333%;
    }
    .column-row-2 {
      min-height: 3.1579rem;
      height: 66.666%;
    }
  }
  .column-left {
    flex-grow: 1;
  }
  .column-center {
    flex-grow: 2;
  }
  .column-right {
    flex-grow: 1;
  }
}

4、sass/less中使用

sass

@function px2rem($px) {
   $design_font_size: 12;
   @return ($px/$design_font_size) + rem;
}

less

@design_font_size: 80;
.px2rem(@name, @px)
{
    @{name}: (@px / @design_font_size) * 1rem;
}


div {
  .px2rem(width,20)
}

5、webpack打包自动处理

首先安装 @njleonzhang/postcss-px-to-rem 这个包

npm i @njleonzhang/postcss-px-to-rem -D

在项目根目录新建.postcssrc.js配置文件

module.exports = {
  plugins: {
    autoprefixer: {},
    "@njleonzhang/postcss-px-to-rem": {
      unitToConvert: 'px', // (String) 要转换的单位，默认是 px。
      widthOfDesignLayout: 1920, // (Number) 设计布局的宽度。对于pc仪表盘，一般是 1920.
      unitPrecision: 3, // (Number) 允许 rem 单位增长到的十进制数字.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) 要忽略并保留为 px 的选择器.
      minPixelValue: 1, // (Number) 设置要替换的最小像素值.
      mediaQuery: false // (Boolean) 允许在媒体查询中转换 px.
    }
  }
}