移动端使用rem进行适配不同屏幕

在移动端适配方法很多

1. 使用百分比
2. flex布局
3. 使用em 或 rem

em 和 rem的两者差别

• 首先em是相对于父元素的font-size的大小决定的
• rem是相对于根元素html的font-size的大小，所以我们想要适配只需动态获取根元素html的font-size的大小

如何动态获取和设置根元素的font-size

• 第一种是使用js

document.documentElement.style.fontSize = (100 / 375) * window.innerWidth + 'px';
//其中375是ui给的设计图的宽度大小 只有这个是根据图来变化的
//window.innerWidth是浏览器窗口的大小

• 第二种是根据css来设置的

html{
    font-size:calc((100vw / 360) * 100);
    //其中360是ui给的设计图的宽度大小 只有这个是根据图来变化的
    //100vw是浏览器窗口宽度（视口宽度）
}

例子

ui图 360px 有个按钮 180px 占一半

所以不管在任何界面大小下 都应该占一半 比如在 1080px 下 width就要为540px 在750px下 width就要为375px

所以width不能写死，只能使用rem来根据根元素变化 默认情况下 根元素的font-size是16px 所以1rem = 16px