数据大屏响应式布局rem

数据大屏响应式布局，主要用到rem，涉及一个rem.js文件，需要安装一个依赖 postcss-px2rem ，此外还用到vw、vh 、百分比相对单位来设置布局宽度。

 

1、什么是rem？摘自菜鸟教程

rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

2、postcss-px2rem 的作用是把css文件中的px自动转为rem 

写css样式时，写固定的px，通过该插件将自动转换px为rem。比如设置头部高度为80px，在浏览器中查看 按f12，会看到对应的css变为了5.714286rem，此时根节点的font-size: 11.6375px;，计算出头部高度为 11.6375 *5.714286=66.5px

 

 

3、rem.js文件如下：

const baseSize = 14
// 设置 rem 函数
const setRem=()=> {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  console.log(scale);
  if(scale>=0.46){
     document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' //根据比例计算根节点的font-size大小
  }else{
     document.documentElement.style.fontSize = '6.5px'
  }
 

}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem()
}

在入口文件main.js中引入rem.js

 当改变窗口时，根据当前窗口宽度重新计算根节点的fontsize

页面中rem的值对应也将重新计算。

4、使用相对单位来设置布局宽度

比如vw，vh （代表窗口的宽和高）

设置100vw 相当于设置百分百窗口宽，10vw相当于设置10%的窗口宽

比如百分比来定义宽高，100% 30%

最外层的div宽高设定好后，内部的div用百分比来定义，相对于外层，多高。

如下所示，

 

大屏左中右三个div设置样式如下： 用百分比设置宽度，当调整窗口宽度的时候，div的宽自动变了。

  #centerBox{
        width:48%;
        height: calc(100% - 100px);
          min-height: 400px;/*no*/ 
        position: absolute;
        z-index: 9999;
        left:26%;
        top: 100px;
    }

    #centerBottomBox{
        width: 100%;
        height: calc(40% - 60px)
    }

    #rightBox{
      width:24%;
      height: calc(100% - 100px);
      min-height: 400px;/*no*/ 
      position: absolute;
      z-index: 9999;
      right:10px;
      top: 100px;
    }
    #leftBox{  
      width:24%;
      height: calc(100% - 100px);
      position: absolute;
       min-height: 400px;/*no*/ 
      z-index: 9999;
      left:10px;
      top: 100px;
    }