自適應rem布局

2021-09-19 15:08:30 字數 1039 閱讀 9195

自適應處理:

假設

(

function

(doc, win);if

(!doc.addeventlistener)

return

; win.

addeventlistener

(resizeevt, recalc,

false);

doc.

addeventlistener

('domcontentloaded'

, recalc,

false);

})(document, window)

;

element.addeventlistener(event, function, usecapture) 事件名,事件觸發時執行的函式,false事件控制代碼在冒泡階段執行/true事件控制代碼在捕獲階段執行

domcontentloaded

domcontentloaded所計算的時間,當文件中沒有指令碼時,瀏覽器解析完文件便能觸發 domcontentloaded 事件;如果文件中包含指令碼,則指令碼會阻塞文件的解析,而指令碼需要等位於指令碼前面的css載入完才能執行。在任何情況下,domcontentloaded 的觸發不需要等待等其他資源載入完

"viewport" content=

"width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

>

initial-scale:初始縮放比例,即當瀏覽器第一次載入頁面時的縮放比例。值為 1.0 即原始尺寸。

maximum-scale:允許瀏覽者縮放到的最大比例,一般設為1.0,即原始尺寸。

minimum-scale:允許瀏覽者縮放到的最小比例,一般設為1.0,即原始尺寸。

user-scalable:瀏覽者是否可以手動縮放,yes 或 no 。

Rem 自適應布局

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

rem自適應布局

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

自適應布局rem

百分比布局只能實現寬度自適應 高度無法自適應 高度也自適應 使用乙個新的單位rem rem root element 根元素 參照根元素的字型大小,是相對單位 預設html元素文字大小是16px 所以 1rem 16px 10rem 160px 原理 示例 window.onresize setht...