rem布局實現不同解析度移動終端的自適應整體縮放

現在手機螢幕解析度越來越多，但我們的需求比較唯一——最佳視覺。

當使用者瀏覽網頁時，根據螢幕的尺寸，來向使用者展示更適合使用者的布局、文字、、按鈕等等，因此，rem應運而生。

rem（font size of the root element）是指相對於根元素的字型大小的單位。一旦根節點html 定義的 font-size 變化，那麼整個網頁中運用到 rem的也會隨之變化。加之當前手機淘汰速度較快，當前主流的手機內嵌瀏覽器核心版本均可以支援rem布局。

本文以750設計稿為例。

第一步：設定初始rem

css file:

html

說明：

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'

rem布局實現不同解析度移動終端的自適應 整體縮放