場(chǎng)景：
在我們開發(fā)移動(dòng)端項(xiàng)目中圈盔，實(shí)現(xiàn)手機(jī)頁(yè)面布局，需要使用rem布局氏豌，那么該如何使用呢？
本文就詳細(xì)的講解了在vue項(xiàng)目中使用rem布局的整個(gè)過程热凹，可以仔細(xì)閱讀哦泵喘！
方法：
（1）使用lib-flexbile
（2）使用postcss-pxtorem
注意：
兩種方法選其一使用哦泪电，避免沖突！! !
方法一：使用lib-flexible
1. 安裝包
npm i lib-flexible
2. 引入文件
在main.js（入口）中引入js文件 ---
import 'lib-flexible/flexible.js'
3. 根據(jù)需要設(shè)置rem
在node_modules文件中找flexible設(shè)置rem
為了方便可以設(shè)置rem為 width / 37.5
相當(dāng)于1rem=10px
步驟
4.使用rem
//比如設(shè)置p標(biāo)簽字體大小為24px
p {
font-size:2.4rem
}
方法二：使用postcss-pxtorem
1. 安裝包
//安裝 postcss-pxtorem
npm i postcss-pxtorem -s
2. 創(chuàng)建rem.js文件
在src目錄新建rem文件夾（一般情況下可以創(chuàng)建util文件夾）纪铺，新建rem.js相速，添加如下代碼
//兼容處理
function setHtml() {
//獲取設(shè)備寬度
var deviceWidth = document.documentElement.offsetWidth;
//給html標(biāo)簽設(shè)置fontSize，就是給rem賦值
document.documentElement.style.fontSize = deviceWidth / 375 * 10 + 'px';
}
//窗口大小變化的時(shí)候執(zhí)行
window.onresize = setHtml;
//頁(yè)面初始加載時(shí)也要觸發(fā)
setHtml();
3. 新建 .postcssrc.js
在項(xiàng)目根目錄新建 .postcssrc.js（注意 . 不要忘記加）,添加代碼如下:
module.exports = {
"plugins": {
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": ["*"]
}
}
}
4. 在main.js中引入
注意：路徑根據(jù)自己新建的文件夾為準(zhǔn)
import '@/rem/rem.js'
5. 設(shè)置body的font-size
html {
font-size: 10px; // 相當(dāng)于1rem = 10px
}
body {
font-size: 16px;
}
6. 可參照流程圖
步驟
以上就是vue如何使用rem適配的兩種方法霹陡，有其他方法的uu們歡迎在評(píng)論區(qū)回復(fù)哦和蚪！
