將頁面的 設計稿等比例的進行縮放
首先是計算視覺稿到頁面的比例
假設這個比例是a
a = 視覺稿的寬度/頁面的寬度（document.documentelement.clientwidth）
根據這個比率去計算 螢幕上應該顯示的寬度 假設這個值是 b
b = 量取的寬度/a
現在我們獲取了元素在螢幕上顯示的乙個寬度 需要將這個寬度 和 頁面的寬度繫結到一起 我們假設這個 值是 rem值 和rem單位
那麼就有下面這些資訊
rem值 * rem單位 = b = 量取的寬度/a = 量取的寬度 * 頁面的寬度 /視覺稿的寬度
這樣我們就可以得出下面的結論
rem值 = 量取的寬度
rem單位 = 頁面的寬度 /視覺稿的寬度
但是 考慮到 我們的rem單位 是fontsize 所以必須要大於 1 所以我們讓這個單位乘上 100 得到下面的
rem值 = 量取的寬度 / 100
rem單位 = （頁面的寬度/視覺稿的寬度 ） * 100
所以我們只要每次按照psd圖量取相應的大小/100 作為 rem值就可以
100% 的完美還原設計稿了
關於rem 布局的理解
頁面中使用的rem單位是相對於 html 這個根節點的作為參考，預設的情況下html的字型大小16x,在什麼也不做處理的情況下，頁面中如果使用了rem，那麼這時候的1rem表示的就是1 16 16px 2rem表示的就是32px的大小 在寫手機端頁面時封裝的rem自適應js檔案如下 這個js裡面設定...
關於rem布局
我們知道，當使用rem布局，並配合js動態按照比例設定html標籤上的rem值時，整個頁面是按照螢幕的寬度來整體縮放的。對於高度不限制的頁面 也就是超出一屏頁面可以滾動 這種方案沒有任何問題，簡單暴力。但是對於一些需要布滿一整屏的頁面 比如現在流行的上下 左右滑動的那種 由於乙個頁面的元素必須在乙個...
關於rem布局摘錄
一般情況下使用em或者rem的時候，會寫個樣式 html,body html，這樣設定方便了em rem與px相互轉換，因為瀏覽器預設字型大小16px，所以em的初始值為1em 16px。當設定了body時，1em則 16px 62.5 10px。但是由於谷歌不相容，所以我個人習慣使用 html。目...