vue cli3.0 使用rem適配不同設備

內(nèi)容摘要：https://github.com/amfe/article/issues/17

CSS單位rem

rem就是相對于根元素<html>的font-size來做計算。而我們的方案中使用rem單位，是能輕易的根據(jù)<html>的font-size計算出元素的盒模型大小。而這個特色對我們來說是特別的有益處。

在vue中使用

1.安裝lib-flexible插件

npm i --save-dev lib-flexible

2.在main.js里引入

import 'lib-flexible'

4.安裝postcss-px2rem插件

npm i --save-dev postcss-px2rem

3.在vue.config.js中配置

module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        remUnit: 37.5
                    })
                ]
            }
        }
    }
}

4.在vue文件的樣式里寫px單位，在瀏覽器運行會自動轉換為rem單位

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

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