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

上一篇:ARM kernel panic misc


下一篇:vue中获取客户端IP地址