前端大屏适配(Vue2+ECharts)+ECharts封装
使用flexible.js+rem实现字体自适应
①flexible.js用于根据屏幕尺寸变化动态调整根元素的字体大小:
(function flexible(window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = (16 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
function setRemUnit() {
var rem = docEl.clientWidth / 24
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
②rem是相对于根元素的字体大小单位:使用VSCode插件并设置基准值(1920设置80);
③main.js中引入:
import './utils/flexible';
ECharts
①echarts封装:
②echarts中的px转换成rem:
export function fontSizeRem(size) {
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (!clientWidth) return;
let fontSize = clientWidth / 1920;//尺寸大小
return size * fontSize;
}
③使用:
.partOne {
background-image: url(../assets/左背景.png);
}
.center {
width: 11.4375rem;
height: 3.4625rem;
display: flex;
justify-content: center;
align-items: center;
}
展示
参考:https://blog.csdn.net/qq_38210427/article/details/130345981