PC大屏自適應 - 簡潔版

PC大屏自適應
通常做法

一般pc端頁面布局會取中間一定的寬度，高度自適應。而可視化大屏需要在不同分辨率的顯示屏上鋪滿整個屏幕，這就需要根據屏幕不同分辨率設置不同的寬高也就是自適應布局。在此向小伙伴們推薦一個rem布局方案，rem是相對於根元素中的font-size計算得出。

post-css 插件可以幫助你做這個計算，效果就是你不用算了，圖上是多少長度，你寫多少就行了，這個 rem 的轉換由插件完成。

rem布局

此布局基於框架vue

npm i @njleonzhang/postcss-px-to-rem
npm i html-webpack-inline-plugin
npm i lib-flexible-for-dashboard

.postcssrc.js
module.exports = {
  plugins: {
    autoprefixer: {},
    "@njleonzhang/postcss-px-to-rem": {
      unitToConvert: 'px',
      widthOfDesignLayout: 1920, // (Number) The width of the viewport.
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false // (Boolean) Allow px to be converted in media queries.
    }
  }
}

vue.config.js
const HtmlWebpackInlinePlugin = require('html-webpack-inline-plugin');

module.exports = {
  lintOnSave: false,
  outputDir: 'docs',
  baseUrl: 'flexible-pc-full-screen',
  configureWebpack: {
    plugins: [
      new HtmlWebpackInlinePlugin({
        compress: false
      })
    ]
  },
}

index.html
<script>
    dashboardFlexible.init(16 / 9);
</script>

 

 

完成，重新啟動程序，設置px就可以直接轉換為rem了，是不是很方便，需要的小伙伴get起來吧！