移动兼容性处理

128 阅读1分钟

其实我了解兼容性的目的只是为了会用。理解了原理确实以后用的时候就不用百度了。

假如我们用的是设备独立像素(设备独立像素可以理解为和css像素的比例为1比1)为375的手机,我设置一个盒子为375px,这样手机的宽度会铺满。 假如应用到设置独立像素为414的手机,当盒子的宽度设置为414px的时候可以铺满。那么怎么适配各种不同的手机的。就是让不同设备像素的手机设置对应的px.

image.png

 function adapter(){
            const dpWidth = document.documentElement.clientWidth
            const rootFontSize = (dpWidth * 100)/375    // 设置稿是750你就写成750
            document.documentElement.style.fontSize = rootFontSize + 'px'
        }
        adapter()
        window.onresize = adapter