目前很多业主在使用系统的时候都会有大屏的需求,很多屏幕并不会像我们开发的屏幕一样标准,比如1920*1080
,这样我们就需要根据业主的屏幕尺寸进行适配,避免一些图表或文字在大屏中出现偏移,影响视觉观感。
如果希望在大屏中实现最佳的展示效果,应该由设计人员针对大屏的尺寸进行单独设计,然后开发人员使用如下监听方式:
@media screen and (max-width: 2560px) {}
@media screen and (min-width: 2561px) {}
以2561px
为分界线,在屏幕尺寸大于分界线时来让不同的样式代码生效。
这种方案可以保证最好的展示效果,完美适配大屏,问题就是如果屏幕发生变化,或者需要适配其他尺寸的屏幕时,需要针对性的进行调整。
使用vw和vh属性来表示dom节点的长宽。
举个例子:我们手里的设计稿是1920*1080
,此时使用vw
和vh
,这样就可以适配大屏。
比如某个dom
节点宽度为200px
,高度为100px
,此时设置他的宽高为:
.dom {
width: (200 / 1920) * 100vw;
height: (100 / 1080) * 100vh;
}
原理也比较简单,对所有dom
节点的宽高根据屏幕大小进行等比缩放,这样做的麻烦点是,代码中会有很多涉及到需要px
单位的地方,每一处都需要写成这种形式,从操作上烦琐了不少。
使用rem来实现响应式的布局,rem
是相对于根元素的字体大小来计算的单位,配合引入相应的postcss相关插件,免去了设计稿中的px到rem的计算。
引入:postcss-plugin-px2rem
,还有很多其他类似插件
或者loader
,引入一个即可。
.dom {
width: 200px;
height: 100px;
}
编译以后的代码为:
.dom {
width: ..rem;
height: ..rem;
}
这样做的优势就是可以安全按照设计稿给出的尺寸来完成css布局,不需要操心转换等问题。
echarts总的大小会根据容器的大小调整,但是字体,间距等需要在代码中设置大小。
由于postcss-plugin-px2rem
只能检测到css文件中的样式,所以需要单独处理,方案也比较简单,选中宽或者高为参考,进行等比缩放即可。
getSize(size) { // 这里是以高度为参考进行等比缩放
return size * (window.innerHeight / 1080);
},
...ehcart legend的设置片段
legend: {
orient: "vertical",
bottom: "10%",
left: "center",
itemGap: this.getSize(10),
itemWidth: this.getSize(8),
itemHeight: this.getSize(8),
itemStyle: {
radius: 5,
},
}
rem的方案是需要选择宽度或者高度为参考的,如果大屏宽高较原稿变化不大可随意选择,如果变化偏大,需要分别设置宽和高为基准,比较哪种更适合屏幕的尺寸。
// rem.js
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientHeight/ 1080
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
如上述代码,是以高度为参考基准的。
这里在适配小屏幕的时候会遇到问题,比如业主要求需要适配他们的平板,此时你可能会发现小屏幕下会有字体重叠的情况出现,这是因为浏览器支持的最小字体为12px,此时需要根据实际小屏幕尺寸调整一下页面的布局。
npm i postcss-plugin-px2rem --save -dev
在vue.config.js中添加配置信息
module.exports = {
//px转rem的配置(postcss-plugin-px2rem插件)
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式
mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
},
}
还有更多的配置项,详情参考官方 https://www.npmjs.com/package/postcss-plugin-px2rem
。
内容参考上方 选择宽度或者高度作为最佳参考标准 代码。
import './utils/rem';
加载以后会调用setRem()方法来触发尺寸的初始化。
为了实现最佳的效果,以上几种方案甚至可以组合使用,希望大家读完文章后能理解并动手实践大屏适配。