設定字根,配合rem適配(多尺寸螢幕的適配)

2021-10-19 22:04:15 字數 323 閱讀 2738

document.documentelement.style.fontsize這個就是字根,(但相對的只是html根元素字型大小。)

rem單位就是相對html根元素字型大小

rem是css3新增的乙個相對單位(root em,根em),這個單位引起了廣泛關注。這個單位與em有什麼區別呢?區別在於使用rem為元素設定字型大小時,仍然是相對大小,但相對的只是html根元素。這個單位可謂集相對大小和絕對大小的優點於一身,通過它既可以做到只修改根元素就成比例地調整所有字型大小,又可以避免字型大小逐層復合的連鎖反應。目前,除了ie8及更早版本外,所有瀏覽器均已支援rem。

手機端rem如何適配 rem詳解及網頁自適應

什麼是rem 在我看來,rem就是1rem單位就等於html節點fontsize的畫素值。所以改變html節點的fontsize是最為關鍵的一步。根據手機寬度改變相對大小就可以實現自適應了,就不用什麼 查詢那些的。我們的設計圖往往寬度是640或者其他尺寸的,不過我建議是用這個尺寸,以640為基準,以...

JS PC端設定rem 移動端設定rem

window.onresize function 頁面剛重新整理時呼叫 init function init const basesize 32function setrem 初始化 setrem window.onresize function 這裡是乙個pc和h5的 rem樣式 寫在了乙個htm...

web app變革之rem(手機螢幕實現全適配)

以往web移動適配,常規寫法是 media only screen media only screen and min device width 320px media only screen and min device width 320px and webkit min device pixe...