CSS學習筆記之rem學習

px是一個絕對單位,不管屏幕怎麼變化,大小固定;

rem是一個相對單位,相對於html的font-size大小設置的;

根據屏幕大小設置html的fontSize;

一般設計稿默認的html的fontSize是100px,因爲比較好計算;

fontSize最小值是12px,所以不能是10px;

寫CSS樣式的時候只需要將設計稿的值除以100,變成rem單位即可;

在js中加上

var W = document.documentElement.clientWidth || document.body.clientWidth;
var dW = 640;
document.documentElement.style.fontSize = W * 100 / dW + "px;"

假設設計稿定義寬度是640;

這樣就會根據屏幕大自動設置html的fontSize了;

PC端的話瀏覽器窗口會發生變化,所以要加在window.onresize事件中,只要瀏覽器窗口發生改變就重新計算fontSize的值;