使用rem配置PC端自適應大屏

在做數據可視化大屏展示頁面時，前端開發人員最大的願望就是通過一種方案，能夠適應所有屏幕的分辨率尺寸，作為在職場摸爬滾打前進的前端開發人員我們也都在努力的學習着。

這里介紹的使用插件的方式來實現的：==》postcss-pxtorem

利用 npm 來安裝：npm install -S postcss-pxtorem

1. 配置rem.js文件

rem.js可以放在src文件夾下，我是放在src下的utils文件夾中

// 設置 rem 函數
function setRem () {
    //  PC端
    console.log('非移動設備')
    // 基准大小
    baseSize = 100;
    let basePc = baseSize / 1920; // 表示1920的設計圖,使用100PX的默認值
    let vW = window.innerWidth; // 當前窗口的寬度
    let vH = window.innerHeight; // 當前窗口的高度
    // 非正常屏幕下的尺寸換算
    let dueH = vW * 1080 / 1920
    if (vH < dueH) { // 當前屏幕高度小於應有的屏幕高度，就需要根據當前屏幕高度重新計算屏幕寬度
      vW = vH * 1920 /1080
    }
    let rem = vW * basePc; // 以默認比例值乘以當前窗口寬度,得到該寬度下的相應font-size值
    document.documentElement.style.fontSize =  rem + "px";
}
// 初始化
setRem();
// 改變窗口大小時重新設置 rem
window.onresize = function () {
  setRem()
};

2. postcss-pxtorem配置

在使用npm安裝這個插件之后會在vue的項目中生成一個postcss.config.js文件，接下來我們要在里面的配置了

 

module.exports = {
  plugins: {
    autoprefixer: { browsers: 'last 5 version' },
    rootValue: 100, //換算基數， 默認100  ，這樣的話把根標簽的字體規定為1rem為50px,這樣就可以從設計稿上量出多少個px直接在代碼中寫多上px了。
    propList: ["*"], //可以從px更改到rem的屬性,值需要精確匹配。
    // 1.使用通配符 * 啟用所有屬性。 示例：['*']
    // 2.在單詞的開頭或者結尾使用 *。 ( ['*position*'] 將匹配 background-position-y )
    // 3.使用 與屬性不匹配。! 示例：['*','letter-spacing']!
    // 4.將"非"前綴與其他前綴合並。 示例：['*','font*']!
    unitPrecision: 5, //允許REM單位增長到的十進制數字。
    propWhiteList: [],  //默認值是一個空數組，這意味着禁用白名單並啟用所有屬性。
    propBlackList: [], //黑名單
    exclude: /(node_module)/,  //默認false，可以（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)/ 。如果想把前端UI框架內的px也轉換成rem，請把此屬性設為默認值
    selectorBlackList: [], //要忽略並保留為px的選擇器
    ignoreIdentifier: false,  //（boolean/string）忽略單個屬性的方法，啟用ignoreidentifier后，replace將自動設置為true。
    replace: true, // （布爾值）替換包含REM的規則，而不是添加回退。
    mediaQuery: false,  //（布爾值）允許在媒體查詢中轉換px。
    minPixelValue: 3 //設置要替換的最小像素值(3px會被轉rem)。 默認 0
  }
}

在package.json文件中添加的代碼

  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 100,
        "propList": [
          "*"
        ]
      }
    }
  },

3. 在main.js中導入

import './utils/rem'

4. 項目中實際使用

// 頁面布局
<template lang="pug">
  div#screen-wrapper//大盒子
    div.header-wrapper//頭部
    div.main-wrapper//主體
      div.mid-wrapper//里面的容器
      div.right-wrapper//里面的容器
      div.left-wrapper//里面的容器
</template>
// 這里是一個簡單的上下布局
//css樣式代碼如下
#screen-wrapper
  width 100vw
  height 100vh
  background-size 100% 100%
  overflow hidden
  position relative
  .header-wrapper
    width:1920px
    height: 64px;
    overflow-x hidden
    position absolute
    left 0
    right 0
    top 0
    margin 0 auto
  .main-wrapper
    overflow hidden
    position absolute
    left 0
    right 0
    top 64px
    margin 0 auto
    width 1920px
    height calc(100% - 64px)
    display flex
    justify-content space-between
    align-items center
    .left-wrapper
      width 25%
      height 100%
    .mid-wrapper
      width 48%
      height 100%
    .right-wrapper
      width 25%
      height 100%

 

方案參考地址：
https://www.cnblogs.com/WhiteM/p/12720849.html

 https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html