HTML 阿里自适应布局心得

先上图:

我对阿里自适应的实现

补充

补充一些内容，晚上回家仔细研究和思考了一下，在深入的测试中，我发现其实只要在viewport
里面禁用缩放即可实现自适应页面，所有页面的宽度将默认设置为980px宽，这样所有手机上页面宽度
都是一样宽的，即不存在适配问题，只需要rem参考宽度即可自动适应到各手机上。那么阿里为什么还
要给出这样一套解决方案？个人认为还是用来处理设计图和开发之间的差异，在之前我说的简单方法
中，页面宽度是固定的而手机屏幕宽度是不固定的，因此页面缩放比被动自适应；阿里则反过来，
利用DPR而主动去计算页面缩放比，通过主动计算缩放比，可以得到设备的物理像素，设计师在设计时
即可直接参照设备物理像素设计图纸而不用考虑到逻辑像素对页面的影响，因为在上面的算法中，在
页面缩小和rem反向放大元素的过程中，DPR对页面的影响，已经完全被约分掉了，设计师可以直接参
考设备物理像素在电脑上设计。