移动web开发填坑

Posted 2020-06-29

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

 

　　1、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即可。

　　由于没有按照上述方法做，于是我挑战了自己的心算能力和耐性，哈哈哈……

 

      2、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，或宽高背景什么的。

　　

　　3、a链接按上去出现黑色背景；

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

 

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

　　

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