移動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!