Vue CLI是一個基于Vue.js的腳手架工具，為Vue.js項目的搭建提供了便捷、快速的方式。同時，隨著移動端用戶逐漸增多，頁面適配也成為了開發者在項目中必須面對的問題之一。這時，rem就成為了一個有效的解決方案。
rem是相對于根元素<html>的字體大小單位，在移動端中非常實用，因為可以根據根元素字體大小調整整個頁面的大小。Vue CLI可以通過配置postcss-pxtorem插件來自動將CSS中的像素值轉換為rem值。
npm install postcss-pxtorem -D安裝完成之后，在項目的根目錄下找到postcss.config.js文件，并進行如下配置：
module.exports = {
plugins: {
autoprefixer: {},
'postcss-pxtorem' : {
rootValue: 16, // 換算的基數
propList: ['*'],
},
}
}這里設置了rootValue為16，即1rem = 16px。同時，將propList設置為星號，表示所有的屬性都需要轉換成rem值。
配置完成之后，在CSS中直接書寫像素值，如下：
.box {
width: 320px;
height: 240px;
font-size: 16px;
}經過postcss-pxtorem插件轉換后，會變成如下：
.box {
width: 20rem;
height: 15rem;
font-size: 1rem;
}使用rem單位可以有效解決移動端頁面適配的問題，如此方便實用的方法，值得我們在Vue CLI項目中使用。
上一篇gin.json
下一篇gin框架json響應