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起来吧!
标签:简洁,false,px,Number,PC,html,rem,大屏 来源: https://www.cnblogs.com/scale/p/15745855.html