rem單位做介面自適應(等比擴大)

2021-10-07 05:48:35 字數 731 閱讀 3941

最近要做乙個大屏的功能,設計的時候只考慮到了1920*1024的解析度

考慮到大屏介面除了在大屏顯示也有可能在pc電腦中顯示,就要做適配

使用 rem 單位來解決(html預設1rem = 16px)

開發的時候按照1920寬度的設計來做,然後單位全部使用rem

監聽視窗的變化,如果寬度超過1920則rem等比例擴大,如果小於1920,則rem按照1920的寬度計算

rem 在此就相當於是乙個百分比的概念了設定html的rem值

html

監聽瀏覽器寬度的變化

(

function()

// 設定根元素font-size大小

docel.style.fontsize =

100*

(clientwidth /

1920)+

'px'

}// 螢幕大小改變,或者橫豎屏切換時,觸發函式

win.

addeventlistener

(resizeevt, recalc,

false

)// 文件載入完成時,觸發函式

doc.

addeventlistener

('domcontentloaded'

, recalc,

false)}

)()

前端自適應 單位rem

通過使用,自我感覺網易的解決方案是最方便我們使用時候的計算。function factory function 注意 1.上邊解決方案,採用是750的psd設計 並不是網易的640 按照個人公司要求。2.此處1rem代表的是width 7.5 px 的結果,也就是750的100px,當我們在實際操作...

rem 單位實現頁面自適應布局

a.先看乙個函式 設定根元素字型大小 param number minsw 最小縮放的裝置螢幕寬度 param number maxsw 最大縮放的裝置螢幕寬度 param number minfs 最小的寬度對應的字型大小 param number maxfs 最大寬度對應的字型大小 return...

手機自適應的單位rem,與自適應網頁的區別

乙個 有的會分為pc站和移動站,有的 只有pc站,而現在更多的是自適應的站點。現在針對自適應的網頁設計有很多模板,如bootstrap,它會讓你輕鬆定製乙個只適應 而現在大多數的 並不是靠程式設計師憑空開發的前端與後端,都會運用已經成熟的框架建立自己的 如一些整合很好的wordpress框架,和織夢...