移動端前端開發不可不知的——rem

在面對豐富尺寸的移動端時，Iphone、安卓各類屏幕分辨率，智能手機品牌、機型如此衆多的今天，各類不規則的分辨率，即便做爲專業團隊的咱們切版網，也很難尋找到全部的真機一一去測試。

不管我怎麼去調試，都會有比例上的不同的問題。這就會致使不能很好的還原設計。

解決辦法固然是有的，那就是使用REM！

首先讓咱們帶您一塊兒理解一下rem

rem是CSS3新增的一個相對單位（root em，根em），使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。

在iphone6上，咱們設置了20px=1rem，可是在iphone4上，一樣的1rem，就不該該是20px，而是應該大約17px（爲（320/375）*20）,這樣才能夠保證對應的1rem和原來的效果類似，不然，在iphone4就變得很大了。因此，在iphone4上咱們要修改html的font-size=17px，但是還有Iphone5，iphone6 plus,還有無數的安卓機型呢？！

下面給你們詳細介紹一下這兩種方法：

第一種是使用媒體查詢控制不一樣分辨率下的根原素大小。方法以下圖，要根據項目的實際類型改變媒體查詢的值。

第二種方法就是經過JavaScript動態獲取屏幕的寬度，而後給HTML設置font-size的值。下面我給你們講解一下這段JS代碼。我主要以手機端爲例。

將這作代碼打包到一個defineRemSize.js的文件中，在頁面裏引用。在用下面這這個方法調用。

作完了這這些，咱們有了能夠自適應的rem的值，接下來我就說一下在實際使用中的一些心得。

Rem不只能夠用在字體大小單，包括容器寬度的值、高度的值、margin的值、padding的值均可以使用rem作爲單位大小。實際上rem更像是聰明的百分比數值。若是頁面全部遠素的值都使用rem，整個面更像是一張圖片。縮小時總體都會縮小，放大里總體都會放大。下面我給你們看一下我使用兩種方法作的同一個頁面的效果圖。

能過對比，會發現，使用rem在不一樣分辨率的設備上總體比例是不變的。而且沒有使用任何媒體查詢方法。可是使用px+%這種方法作出來的頁面，在不一樣的頁面上的元素的間距會發生改變，圖片會隨首設備寬度的變化而變化，可是文字大小以及元素的間距並無發生變化。

由以上能夠得出，在使用rem作爲頁面元素單位時，在適配時會更加簡便，而且頁面在不一樣尺寸的終端設備上頁面總體比例不會改變。不須要咱們再經過Media query 來適配不一樣的分辨率。而且作出來的頁面會更加的接近設計圖。

h五、響應式切圖，找切版網（ www.qieban.cn ），是國內較早專一網頁切圖服務的團體，由人均3年的前端開發者構成，堅持以高性價比的服務爲宗旨，普通頁平均80一頁，擁有超過200多客戶創建至今。超過1500多個項目。長期致力於致力於h五、響應式前端外包服務總體解決方案。