關於rem佈局的理解

將頁面的 設計稿等比例的進行縮放 
首先是計算視覺稿到頁面的比例 

假設這個比例是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% 的完美還原設計稿了
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章