这段时间全职h5,响应性给我搞的头皮发麻
难点
对于响应性最好的效果当然是选择媒体查询-@media， 至于难点主要存在于ios和android;
难点一：穷
本人使用的手机是华为的，没有iphone的真机，所以完成后只有android走一遍流程就提上去了。
解决方法：
- 努力赚钱
- 交给测试，从测试要机器
难点二：ios真机跟chrome的模拟是有一定区别的
- 很早之前做微信遇到过ios中flex布局高度塌陷问题
- h5移动端中ios将我的行内标签属性变成了块级（这里没有去深究，只是借了同事真机本地测）
解决方法
- 找到问题手机，本地调试就好了
难点三：加载慢
- 由于本地测试流程顺畅放到测试服务器上访问卡顿，这里有几个点要说一下。
- 首先确认是不是全量加载图片字体
- 其次查看一下图片是不是太大了，一般200kb差不多了（图片根据机器显示模糊是机器像素问题参照）
- 请求是不是出了问题，没有处理好返回
- 轮询请求调多了
- 排除1中的问题后，继续回到访问卡顿上
- 一般的测试服务器带宽不会很大，这个很影响访问速度（主要原因公司穷，这里可以试一下正式服）
- 字体是会全量加载的，最好是选择一些小包字体，或者线上字体（当然也有按需加载的，不过与我麻烦）
解决方法
- 不要用多种字体
- 尽量选择线上字体
- 自己CND字体包
- 增加带宽
难点四：字体问题
在ios上面的字体会变得和一般情况下不一样
解决方法
- -webkit-text-size-adjust: none;全局加上这个就好了
难点五：Safari对margin的动画问题
Safari浏览器上面margin属性百分比不支持动画效果
解决方法
- 动态转（百分比转换成数值，绑定到样式里面）
- 写死数值，没有响应画面比较丑（接受展示效果不是最优）
难点六：维护问题
- 由于响应的css代码，一旦产品经理进行变更就会有大量的代码改动
解决方法
- 把产品按在地上锤撒气
- 把自己按在地上锤憋气
- 把代码按在地上锤，屎山越积越高
- 心平气和慢慢改，多喝水
