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