自適應布局rem

2021-10-02 20:17:02 字數 486 閱讀 4255

//百分比布局只能實現寬度自適應 高度無法自適應

//高度也自適應 使用乙個新的單位rem

rem : root element 根元素 參照根元素的字型大小,是相對單位

預設html元素文字大小是16px 所以 1rem == 16px , 10rem == 160px

原理:

示例:

window.onresize = () => 

sethtmlfontsize()

$(window).bind( 'orientationchange', function(e) , 200)

});function sethtmlfontsize () else

document.getelementsbytagname('html')[0].style = 'font-size:' + fontsize + 'px'

}

Rem 自適應布局

1.先引入一下js,到頭部的script標籤的最前面。2.根據設計稿大小,調整裡面的最後兩個引數值。3.使用1 rem 100px轉換你的設計稿的畫素,例如設計稿上某個塊是100px 300px,換算成 rem則為1 rem 3rem。上面的 如果在 uc瀏覽器下橫屏與豎屏轉換,發現 並沒有 自適應...

自適應rem布局

自適應處理 假設 function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,fals...

rem自適應布局

使用rem實現自適應布局,應該算是當前移動前端的一大趨勢,有些人對此還有點迷惑,搞不懂rem是如何實現自適應布局,如何根據設計稿來調整rem的值?rem布局如何用雪碧背景?rem一定要載入js嗎?rem的根html font size設定為多少合適?看看這篇文章,也許能幫到你。目前有兩種,一種是根據...