html移動端適配方案rem

爲了作到一次開發的網頁可以在不一樣尺寸的移動端設備上適配，咱們須要使設計稿上標註的固定尺寸在不一樣設備上按照設備大小的比例顯示不一樣的尺寸。

好比設計稿是按照 IPhone6 的 750px 像素設計的，設計稿上的頭部導航條的高度是75px。

那麼在 IPhone6 的手機上導航條顯示的高度就是75px，在640px像素的手機上顯示的高度就應該是(640/750) * 75 = 64px,以此類推，在不一樣像素手機上元素的大小就是(實際設備大小/設計稿大小)*設計稿上該元素的大小。

而在實際開發中，咱們不可能經過這樣的計算來設計每個元素的寬高，由於代價太大。

那麼既然一個元素在不一樣設備上的大小比例等於不一樣設備之間的比例，顯然這裏咱們須要一個變量，這個變量與設備大小相關，是根據不一樣設備計算出來的不一樣的值，元素實際大小 = 一個常量 * 該變量。

常量天然取得是設計稿中的大小，那麼答案呼之欲出，變量用的就是css新特性中的REM值，這個屬性自己就是一個變量

固然設計rem值的核心就是經過js來根據設備的大小，按照公式計算出html的font-size值

這裏介紹兩種作法：

• 淘寶作法

  把rem值設爲設備大小/10，好比750px的rem=75px;640px的rem=64px,那麼設計稿（750px）中一個75px的元素用rem表示就是1rem，由此能夠作到在640設備裏顯示是64px。因此在根據750px的設計稿編寫css時，元素的大小就是（設計稿標註大小 / 75(設計稿的rem值)）+ 'rem'

  可是這種方法的缺點就是有時結果是十分複雜的小數，不便計算

• 網易作法

  接着上述淘寶描述，爲了方便計算，咱們如今不想讓元素的大小還須要除以75這個750px中的rem值，而是想讓750px中的rem值是1，也就是說750px設計稿中的rem計算爲(750 / 750) = 1,那麼固然爲了保證別的設備中的rem值可以和750px中的rem值擁有原有的比例關係（也就是實際設備大小 / 設計稿大小），就須要這樣計算設備的rem值：(設備大小 / 750)。

  如此，就能夠在設計元素的大小直接使用設計稿中的大小，可是單位要換爲rem。

總結：這兩種方案十分相似，只是在計算的方法上有所不一樣，可是最爲最爲關鍵的要點就是保證不一樣設備rem值之間的比例等於設備大小的比例，如此才能保證元素在使用rem做爲單位時也保有相同的比例，從而作到真正的適配方案。

參考文章：http://www.cnblogs.com/well-nice/p/5509589.html