其实我了解兼容性的目的只是为了会用。理解了原理确实以后用的时候就不用百度了。
假如我们用的是设备独立像素(设备独立像素可以理解为和css像素的比例为1比1)为375的手机,我设置一个盒子为375px,这样手机的宽度会铺满。 假如应用到设置独立像素为414的手机,当盒子的宽度设置为414px的时候可以铺满。那么怎么适配各种不同的手机的。就是让不同设备像素的手机设置对应的px.
function adapter(){
const dpWidth = document.documentElement.clientWidth
const rootFontSize = (dpWidth * 100)/375 // 设置稿是750你就写成750
document.documentElement.style.fontSize = rootFontSize + 'px'
}
adapter()
window.onresize = adapter