移动web开发填坑（一）

　　上周开始接触移动web开发，默默的掉进了不少坑里面。本文主要总结本周遇到的坑以及如何填坑。

 

　　一、px与rem换算。

　　设计稿的宽度通常是640px，而iphone是320px，因此测量设计稿的结果首先要除2，这时的单位仍是px，下一步要转换成rem，怎么转换呢？得看根节点怎么设置的。

　　首先，任意浏览器的默认字体高都是16px，全部未经调整的浏览器都符合: 1em=16px；那么10px=0.625em；因而为了便于计算，能够为body设置font-size=62.5%；到这里，换算关系为10px=1rem。

　　综上，设计稿的px，要除20变成rem，因此，咱们设置一个变量unit=20，在less里面直接将设计稿的数值除以@unit便可。

　　但并非全部的地方都须要转换成rem，有些地方仍是须要用px，好比某些不须要跟着设备变化而变化的文字，在这些地方的边距有的得用px，有的得用rem，还得多写代码才能如鱼得水。

　　因为没有按照上述方法作，因而我挑战了本身的心算能力和耐性，哈哈哈……

 

      二、1px线条在retina屏显示2px；

　　这个问题在上一篇《移动web开发基础——像素》里面说明过产生缘由。之因此还掉坑里，是由于开发时就忘了这个梗了……

　　知道缘由以后，咱们就来解决问题。要在手机上呈现1px，咱们得写0.5px，因为并非全部的ios系统都支持0.5px，因此为了实现0.5px，咱们能够把1px缩0.5倍，横线就纵向缩scaleY(0.5)，竖线就横向缩scaleX(0.5)。

　　其次是关于线条的插入方式，为了避免影响html结构，最好经过before或after的伪类来插入空内容，而后设置边框1px，或宽高背景什么的。

　　

　　三、a连接按上去出现黑色背景；

　　这个问题一行代码搞定：-webkit-tap-highlight-color:transparent;把它加到a的样式上去。

 

　　四、html里不要使用img标签，图片都放到样式里面当背景。好处是能够二次压缩图片。

　　

　　移动开发还需积累经验啊，第一次花了好多时间各类量设计稿各类改代码各类找大神各类找资料，but，I enjoy it!