大屏适配

1.创建文件


export const echartsSize = function (size, defalteWidth = 1920) {
const docEl = document.documentElement
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
if (!clientWidth) return
const fontSize = (clientWidth / defalteWidth)
return Number((size * fontSize).toFixed(3))
}

// 设置系统缩放比,适配各分辨率
export function refreshScale () {
const baseWidth = document.documentElement.clientWidth
const baseHeight = document.documentElement.clientHeight
const appStyle = document.getElementById('app').style
const bodyStyle = document.getElementsByTagName('body')[0].style
const realRatio = baseWidth / baseHeight
const designRatio = 16 / 9
let scaleRate = baseWidth / 1920
if (realRatio > designRatio) {
scaleRate = baseHeight / 1080
}

/**/
appStyle.transformOrigin = 'left top'
appStyle.transform = `scale(${scaleRate})`
appStyle.width = `${baseWidth / scaleRate}px`
appStyle.height = `auto` //设置高度
/*bodyStyle.background = `radial-gradient(#152B65, #122659 ,#030D32)`*/
bodyStyle.background = `url('https://qiniu.dev.haiwojiamei.com/upload/meijia/20210728/cc9c326b15391925efa780367501f82e.png') no-repeat`
bodyStyle.backgroundPosition ='center center'
bodyStyle.backgroundSize = '100% 100%'
}
2.在文件中引入
import {refreshScale} from '@/utils/util'
3.初始化和窗口变化时执行
mounted() {

refreshScale();
window.onresize=function(){
refreshScale()
}

},

3.设置
body #app{
width: 1920px;
height: 1080px;


}





上一篇:原型导出的 html 页面在手机端适配


下一篇:手机端页面自适应布局---rem