H5移動(dòng)端適配

rem適配

  • rem是相對(duì)于根元素來(lái)動(dòng)態(tài)調(diào)整大小的單位。

思路

  • 想象成把屏幕分成 10 等分，那么 1rem = document.doumentElement.clientWidth / 10； (例如：375px 那么 1rem = 37.5px)
// 代碼如下
let doc = document.documentElement
let width = doc.clientWidth
// 把屏幕分成10份
let num = 10
doc.style.fontSize = width / num + 'px'   // 37.5px
  • 如果要畫(huà)一個(gè)40 * 40的正方形。則width: 40 / 37.5rem

媒體查詢(xún) @media

  • 主要通過(guò)查詢(xún)不同寬度來(lái)執(zhí)行不同css，達(dá)到適配屏幕的目的。

vw + vh + 媒體查詢(xún)

  • 使用插件 (https://github.com/evrone/postcss-px-to-viewport) , 將px轉(zhuǎn)換為vw
最后編輯于 ：
?著作權(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)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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