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起来吧！

参考：大屏上的全屏页面的自适应适配方案