2021-08-13 页面按照比例缩放三种实现方式

1. 按照scale进行缩放，原始比例不会发生改变

window.onresize=()=>{
                var scaleWidthPercent = document.documentElement.clientWidth * 1.0 / 1920;
                
                var scaleHeightPercent = document.documentElement.clientHeight * 1.0 / 1080;
                
                 //向左向上移动50%，这里不管比例怎么样，整个页面都会居中
                const flex=document.getElementsByClassName('flex')
                flex[0].style.transform= "scale(" + Math.min(scaleWidthPercent, scaleHeightPercent) + ")"
setScale
            }

还可以设置元素缩放的基点，例如从左上角开始

flex[0].style['transform-origin'] = '0 0'
                flex[0].style.width='1920px'
                flex[0].style.height='1080px'

2. zoom缩放
   zoom支持0.1-正数，或者 百分比写法，同scale，元素也不会失真
3. rem缩放
   默认情况下1rem=16px
   添加页面监听，动态改变font-size

function setRemUnit () {
  var docEl = document.documentElement
  var rem = docEl.clientWidth / 88
  docEl.style.fontSize = rem + 'px'
}

setRemUnit()
window.addEventListener('resize', setRemUnit)

同时记得通过媒体查询，设置最小和最大字体，防止页面变形

@media screen and (max-width: 800PX) {
    html {
        font-size: 10PX !important;
    }
}

@media screen and (min-width: 1000PX) {
    html {
        font-size: 16PX !important;
    }
}