HTML 阿里自适应布局心得

先上图:

我对阿里自适应的实现
补充
补充一些内容,晚上回家仔细研究和思考了一下,在深入的测试中,我发现其实只要在viewport
里面禁用缩放即可实现自适应页面,所有页面的宽度将默认设置为980px宽,这样所有手机上页面宽度
都是一样宽的,即不存在适配问题,只需要rem参考宽度即可自动适应到各手机上。那么阿里为什么还
要给出这样一套解决方案?个人认为还是用来处理设计图和开发之间的差异,在之前我说的简单方法
中,页面宽度是固定的而手机屏幕宽度是不固定的,因此页面缩放比被动自适应;阿里则反过来,
利用DPR而主动去计算页面缩放比,通过主动计算缩放比,可以得到设备的物理像素,设计师在设计时
即可直接参照设备物理像素设计图纸而不用考虑到逻辑像素对页面的影响,因为在上面的算法中,在
页面缩小和rem反向放大元素的过程中,DPR对页面的影响,已经完全被约分掉了,设计师可以直接参
考设备物理像素在电脑上设计。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容