移动端屏幕适配(rem+js) | 您所在的位置:网站首页 › px怎么转换为磅 › 移动端屏幕适配(rem+js) |
rem适配原理 rem是相对长度单位,可以做到一样的取值,在不同尺寸的屏幕上的大小按比例缩放。 rem的定义:rem(font size of the root element)是相对于根元素(即html元素)font-size计算值的倍数。 例如html标签设置font-size:16px,同时div设置width:1.2rem。那么这个div的宽度就是1.2rem=16px*1.2=19.2px。 因此这种方法的适配原理是:根据不同屏幕的宽度,以相同的比例动态修改html的font-size适配,并将px替换成rem,它可以很好的根据根元素的字体大小来进行变化,从而达到各种屏幕基本一直的效果体验。 //获得屏幕大小 let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth; //浏览器兼容 console.log("屏幕宽度:"+htmlwidth) //iphone5:320 iphone6:375 //获得html DOM元素 let htmlDom = document.getElementsByTagName('html')[0]; //给DOM元素设置样式 htmlDom.style.fontSize = htmlwidth/20 + 'px'; //以iphone5为基础 iphone5默认字体大小为16px 320/16=20 即1rem字体大小是屏幕宽度的1/20 // 如果以iphone6为基础,iphone6默认字体大小为16px 375/16=23.4375 即1rem字体大小是屏幕宽度的1/23.4375 |
CopyRight 2018-2019 实验室设备网 版权所有 |