面對豐富尺寸的移動端時，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 來適配不同的分辨率。并且做出來的頁面會更加的接近設計圖。

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