網(wǎng)頁(yè)樣式編寫注意事項(xiàng)

首先使用chrome 手機(jī)模擬器上測(cè)試布局。

不同真機(jī)測(cè)試布局問(wèn)題！！手機(jī)模擬器上沒(méi)有的問(wèn)題，真機(jī)上可能會(huì)出問(wèn)題！

獲取手機(jī)的瀏覽器的高度。
window.screen.height

常用的移動(dòng)端HTML　布局單位

vh: 　等于1% 當(dāng)前視窗的 ICB ( initial containing block,網(wǎng)頁(yè)根元素所在的長(zhǎng)方形的包含塊)的高度。
vw: 　等于1%當(dāng)前視窗的ICB的寬度。
rem: 表示網(wǎng)頁(yè)根元素（一般是html）的font-size。一般情況下，瀏覽器都是等于16px，用戶可以自定義，我就常定義為100px?！?br> 這３個(gè)單位可以幫助我們將網(wǎng)頁(yè)各個(gè)元素適配不同手機(jī)的屏幕大小。
calc(100vh - 2.16rem); 　使用calc可以對(duì)方面的讓某個(gè)元素充滿特定的屏幕區(qū)域。

響應(yīng)式布局方式。

flex : 可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局.

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容