一直对移动端的适配没有比较清晰的认识,感觉一直都是处于比较游离的状态。每次做关于移动端的项目,心里比较虚,很多东西拿不准。
学习过程
从手淘H5终端适配这个文档中大概学到了一个比较清晰的流程(这个文档真的真的很好)。在学习下面内容之前可以先去了解一些手机适配的基本概念
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
学习笔记
- 手淘H5终端适配中需要引入他们自己编写好的脚本
- 这个脚本主要做的事情:
- 首先判断是否有默认的
meta[name="viewport"]
和meta[name="flexible"]
- 在项目的html标签中添加
data-dpr="2"
和style="font-size: 64px;"
两个属性,对于安卓手机data-dpr都是1,如果对于比较完美的话,可能不太适合用这个脚本。(安卓的手机这种款式超级多,而且不规则)
- 首先判断是否有默认的
- 设计师给的设计稿一般都是640, 750, 1150等尺寸,假设设计师给的是750的设计稿,那么我们的开发基准可以定为75px(比如使用的编辑工具visula studio code,里面的px转为rem的工具,默认的基准是16,可以修改为75)
- 然后可以按照设计稿写好相应的样式就好
注意:字体不能rem做单位,可以根据data-dpr显示相应的字体,比如data-dpr=1显示12px的字体,data-dpr=2显示24px字体…
自己的一些想法
如果不使用编写好的脚本,自己可以实现一个小一点的脚本,对于安卓手机,也保持data-dpr=1
,然后在head中添加一段脚本,在html中生成font-size属性。对也苹果手机,可以添加一些判断。