移动端屏幕宽度自适应原理及实现

问题：当前市场上手机屏幕宽度不尽相同，常见有320px（ipone5）、375px（ipone678）等等，而为了在不同宽度的手机屏幕上良好现显示网页，让页面能够在不同尺寸的屏幕上完美适配
https://www.cnblogs.com/chenyoumei/p/10510321.html
原理：实现屏幕宽度自适应主要有两种方案

1. 使用百分比长度单位：vh、vw、rem、em、%
   优点：一套css代码就可以适配所有屏幕
2. 使用固定长度单位px，再用js根据当前设备屏幕宽度计算比例，对网页进行缩放；
   优点：网页宽度恒定，便于计算

实现：

1. rem布局：通过动态修改html font-size的大小来实现，1rem==页面根元素html的font-size大小。
   首先需要在meta标签中设置禁止缩放：
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
   然后在页面加载是js动态获取当前视窗的宽度，计算得出相对于设计稿的比例，修改html的font-size大小

function initFontSize(){
    var html = document.getElementsByTagName("html")[0];
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    //假设视窗宽度为375px时，font-size为16px；
    html.style.fontSize = width/375 * 16 + 'px';
}
initFontSize();
//窗口大小变化时，重新计算font-size
window.onresize = ()=>{ initFontSize() }

2. em：相对长度单位，相对于当前元素内字体的大小，如果当前元素没有设置字号，就找父元素的。

3. vw：相对于视窗的宽度，1vw为视窗宽度的1%。
   vw可以配合rem来实现屏幕自适应，移动端设计稿通常使用750px宽度，前端开发是通常使用375px的网页宽度，此时1vw=3.75px，4vh=15px；为了方便计算，可以设置html的字体大小为4vw；

4. %：单纯使用%无法确定元素高度，所以基本不用；

5. 固定长度单位px，再使用js根据当前屏幕的宽度进行网页缩放

• window.screen.width获取屏幕宽度
• 修改meta标签的initial-scale来改变页面初始缩放值