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