在实际开发过程中，需要适配移动端各个设备。通常，设计师给的设计稿是以iphone6为设计基准。
在开发过程中，发现在浏览器切换时，不能适应各个设备。查找发现，在其中一个布局中设置了宽度为定宽。例如：我设置width:325px,在iPhone6中是可以的，但是小于320px时是不能适应的。
经过思考，改动如下：
1、width:325px，相对于iPhone6的375宽度占比为86%左右。设置widht:86%;然后，测试果然能够适应，没有出现布局超过设备宽度的情况。
2、将布局中能够使用display:flex的情况下 ，使用该布局方式。可以做到弹性布局。
3、也可以针对特定设备，如：设备宽度为320px，设置媒体查询
@media (screen < 320) { width: 百分比或定宽；}
4、设置window.addEventlistener('resize', () => {}),通过改变字体大小，结合rem，来动态改变设备的宽度。即，当设计稿为iPhone6时，设置一个字体大小（便于css样式设置即可），当窗口大小（resize时事件触发），由于设备宽度改变，字体大小也发生改变，相应的根据rem设置的布局也发生改变，实现了动态的布局。
