移動端頁面使用單位的問題：關於px、百分比、em、rem開發中逐漸轉換的問題記錄

前端開發單位使用問題記錄 px，百分比，em，rem

一、單位與區別：

px：像素，相對於屏幕分辨率而言的，簡單來說就是平時我們寫靜態頁面時用px作單位，但是在firefox/chrome會發現我們的布局發生了變化；

百分比：這比較適合塊狀的頁面設計，但是他相對於不同屏幕而言的，比如經常在寫移動端的時候也會用到

em：是相對長度單位，相對於父級元素的單位。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。就是當默認字體大小為14px，那么就有1em=14px；

rem：是相對於根元素，這樣就意味着，我們只需要在根元素確定一個參考值。

二、問題與總結

平時寫pc端頁面時，一般是px作為單位，遇到一些比較復雜的需要定位的也會夾雜使用百分比

主要來說說移動端頁面：

1、剛開始接觸移動端頁面時，我用的是百分比和px,當時做出來就只對着一個手機進行調試，結果可想而知的，用不同瀏覽器測試時，有些布局就亂掉了，就算調整也不能完全還原設計圖所設計的；

2、后面發現了使用em作為單位，它是相對長度單位但是是相對於父級元素的，相對於當前對象內文本的字體尺寸，當瀏覽器分辨率發生變化時，他會重新計算相對的長度的大小並展現出來

這個行內文本的字體大小是可以認為設置的，默認是14px，就有1em=14px，所以將頁面里的px轉化為em在顯示是基本可以滿足適應不同移動端瀏覽器的，下面我就開始了漫長的計算過程

因為不同移動端屏幕的分辨率是不一樣的，而我們一般得到的設計稿是640px，那怎樣才能在750px等更大寫的屏幕上完美的顯示出來呢：

這里我使用的是css3 媒體查詢，先給頁面設置一個字體大小為18px（也就是1em=18px）然后按不同的屏幕尺寸，分別計算不同屏幕下相對於18px的字體大小：

body {
  font-size: 18px;
}
@media only screen and (max-width: 300px) {
  body {
    font-size: 16.666666px;
  }
  .viewport {
    max-width: 300px;
  }
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
  body {
    font-size: 16.666666px;
  }
  .viewport {
    max-width: 310px;
  }
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
  body {
    font-size: 17.22222px;
  }
  .viewport {
    max-width: 320px;
  }
}
@media only screen and (max-width: 350px) and (min-width: 320px) {
  body {
    font-size: 17.77778px;
  }
  .viewport {
    max-width: 350px;
  }
}
@media only screen and (max-width: 360px) and (min-width: 350px) {
  body {
    font-size: 19.44444px;
  }
  .viewport {
    max-width: 360px;
  }
}
@media only screen and (max-width: 400px) and (min-width: 360px) {
  body {
    font-size: 20px;
  }
  .viewport {
    max-width: 400px;
  }
}
@media only screen and (max-width: 470px) and (min-width: 400px) {
  body {
    font-size: 22.22222px;
  }
  .viewport {
    max-width: 470px;
  }
}
@media only screen and (max-width: 480px) and (min-width: 470px) {
  body {
    font-size: 26.11112px;
  }
  .viewport {
    max-width: 480px;
  }
}
@media only screen and (max-width: 540px) and (min-width: 480px) {
  body {
    font-size: 26.66666px;
  }
  .viewport {
    max-width: 540px;
  }
}
@media only screen and (max-width: 560px) and (min-width: 540px) {
  body {
    font-size: 30px;
  }
  .viewport {
    max-width: 560px;
  }
}
@media only screen and (max-width: 570px) and (min-width: 560px) {
  body {
    font-size: 31.11112px;
  }
  .viewport {
    max-width: 570px;
  }
}
@media only screen and (max-width: 630px) and (min-width: 570px) {
  body {
    font-size: 31.66666px;
  }
  .viewport {
    max-width: 630px;
  }
}
@media only screen and (max-width: 640px) and (min-width: 630px) {
  body {
    font-size: 35px;
  }
  .viewport {
    max-width: 640px;
  }
}
@media only screen and (max-width: 710px) and (min-width: 640px) {
  body {
    font-size: 35.55556px;
  }
  .viewport {
    max-width: 710px;
  }
}
@media only screen and (max-width: 720px) and (min-width: 710px) {
  body {
    font-size: 39.44444px;
  }
  .viewport {
    max-width: 720px;
  }
}
@media only screen and (min-width: 720px) {
  body {
    font-size: 40px;
  }
  .viewport {
    width: 720px;
  }
}

然后就可以計算出不同屏幕分辨率下的相對尺寸是多少px，在按照設計稿計算出em值（假設設計稿為640px，那么（1em=35px））

em是相對於父級元素變化的單位，所以當你的父級元素的字體大小發生變化時他也會跟着變化

3、rem，是直接的相對於根元素變化的，感覺這是em的一個升級。。。

同樣的這也是需要計算和設計初始的字體大小的，但是有個很便捷的路徑，使用sublime text3里面的一個cssrem插件配合使用flexible.js，可以自動進行換算，省時省力，還省代碼。當時有的時候還得配合使用百分比和px。

以上都是個人的小經驗總結