數據大屏響應式布局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;
    }