久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

17
2017/06

移動端如何使用js來實現(xiàn)rem單位的布局(一)

發(fā)布時間:2017-06-17 13:41:09
發(fā)布者:jiangbing
瀏覽量:
0

關(guān)于移動端布局使用哪種單位,每個人都有自己習(xí)慣使用的單位。單位的使用是開發(fā)者比較頭疼的一部分,很多人在談到寫移動端頁面的時候,都覺得很惱火。因為要寫n套css樣式,然后用媒體查詢做適配。

部分前端開發(fā)者會使用rem單位配合媒體查詢來實現(xiàn)頁面布局,但是也有很多開發(fā)者朋友用js來實現(xiàn),下面就講解一下用js如何實現(xiàn)這一效果。

首先要獲取屏幕的寬度,然后根據(jù)屏幕大小的不同設(shè)置根節(jié)點(diǎn)的字體大小。

這樣用屏幕的寬分成16份就得出每份是多少了,如果是320像素下的寬除以16就等于20,也就是1rem=20px;如果是414像素下的除以16,就是1rem=25.875px;每個屏幕尺寸不同的情況下rem都有所不同,這樣就達(dá)到了適配的效果。明白的小伙伴就趕快動手試試吧!

關(guān)鍵詞:
返回列表