使用弹性布局em,rem自适应移动端页面

使用弹性布局em与rem自适应移动端页面

em与rem对比起来em的不好的地方是em是基于父级为标准做单位换算，大多数浏览器的html的font-size的默认值为16px，所以基于body的所有子集都是以16px为基准来进行em的换算，麻烦的是，如果子元素的父级在不止一个的情况下，em单位会继承上一父级的font-size属性，子集的单位换算就会变得复杂。

rem是作用于根元素就是html，所以页面内的所有元素都是对照着html的font-size进行换算，不受父级的影响

在项目过程图为了100%还原设计稿，设计稿的尺寸都的宽一般为750，通过viewport设置显示区域为750.

<meta name="viewport" content="width=750,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">

我们这里设置基准值以100px为例，750/100=7.5 (750px = 7.5rem)

html,body{
     
    width: 100%;
    height: 100%;
    font-size: 100px;
}

用过js动态获取屏幕宽度，来重新计算基准值。

	let html = document.getElementsByTagName('html')[0];

    resize()

    window.addEventListener('resize',function () {
     //执行
        resize()
    })

    function resize(){
     
        let width = document.body.offsetWidth
        console.log(width)
        width > 750 ? 750 : width;
        width < 320 ? 320 : width;
        html.style.fontSize = width/7.5 + 'px'
    }