前言

現在手機螢幕解析度越來越多，但我們的需求比較唯一——最佳視覺。 
當用戶瀏覽網頁時，根據螢幕的尺寸，來向用戶展示更適合使用者的佈局、文字、圖片、按鈕等等，因此，rem應運而生。 
rem（font size of the root element）是指相對於根元素的字型大小的單位。一旦根節點html 定義的 font-size 變化，那麼整個網頁中運用到 rem的也會隨之變化。加之當前手機淘汰速度較快，當前主流的手機內嵌瀏覽器核心版本均可以支援rem佈局。

開擼

一般移動端的UI設計稿會採用iphone6寬度畫素的尺寸作為標準——750，具體理由自行百度下，這裡不再過多贅述。豎向一般不用考慮，基本是流佈局，非限定一屏高度的話無影響。

本文以750設計稿為例。

第一步：設定初始rem

css file:

html{
    font-size: calc(100vw/7.5);
}

• 1
• 2
• 3

說明： 
100vw是裝置的寬度，除以7.5可以讓1rem的大小在iPhone6下等於100px。

第二部 全域性px替換為rem

替換設計稿中的px為rem，注意rem=px/100，即font-size: 12px，需要寫成font-size: .12rem，其他寬度、高度、間距等同理。由於rem是相對於根節點元素大小的單位，遂當裝置寬度改變時，採用rem佈局的大小均會跟隨相同比例變化，從而實現整體縮放。

我做了個demo，看下瀏覽器中的效果：

小視窗：

大視窗：

動態展示：

注：safari瀏覽器手動拖動不會響應，但不管初始化視窗多大，首次開啟時，都是自適應的，若是手動託拽，可以配合重新整理觀察效果。

最後，若是低版本的裝置不支援rem，那麼就需要js來處理一下：

document.documentElement.style.fontSize = window.innerWidth/7.5 + 'px'

• 1

本博文demo下載地址：http://download.csdn.net/download/irokay/10181057