vue中使用rem

在vue組件中使用rem作為單位可以在index.html 的script標(biāo)簽中添加如下代碼：

<script>
    const baseSize = 32
    // 設(shè)置 rem 函數(shù)
    function setRem() {
        // 當(dāng)前頁(yè)面寬度相對(duì)于 750 寬的縮放比例，可根據(jù)自己需要修改。
        const scale = document.documentElement.clientWidth / 750
        // 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大小
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    }
    // 初始化
    setRem()
    // 改變窗口大小時(shí)重新設(shè)置 rem
    window.onresize = function () {
        setRem()
    }
</script>

之后計(jì)算單位則是：設(shè)計(jì)圖px / 32 = rem

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容