手淘-网易适配方案

最新推荐文章于 2023-10-26 07:41:05 发布

chentian888

最新推荐文章于 2023-10-26 07:41:05 发布

阅读量1.7k

点赞数 1

分类专栏：移动端

本文链接：https://blog.csdn.net/JSCTO/article/details/81259482

版权

本文探讨了网易和手淘（淘宝）在移动端屏幕适配的方案。网易方案基于设计稿横向分辨率计算元素宽度，利用动态设置html的font-size实现适配。手淘则通过设置meta标签及动态font-size，确保页面与设计稿比例一致。两者共性包括动态font-size、按设计稿尺寸计算布局，但设计稿分辨率、viewport设置和计算方式存在差异。

摘要由CSDN通过智能技术生成

网易的适配方案

设计稿640px取一个100px的font-size为参照那么body元素的宽度就可以设置为width: 6.4rem，所以html的font-size=deviceWidth/6.4 这个deviceWidth就是viewport设置中的那个deviceWidth，根据这个计算规则，可得出适配方案

deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px