1. 程式人生 > >使用vue-cli 搭建的專案中使用rem佈局

使用vue-cli 搭建的專案中使用rem佈局

使用vue.js搭建一個移動端專案,怎樣做到自適應呢?當然選擇rem佈局是比較方便快捷的。
在使用vue-cli搭建好專案框架後,在目錄結構的index.html檔案中新增一段程式碼:
<script>
fnResize()
window.onresize = function () {
fnResize()
}
function fnResize() {
var deviceWidth = document.documentElement.clientWidth || window.innerWidth
if (deviceWidth >= 750) {
deviceWidth = 750
}
if (deviceWidth <= 320) {

deviceWidth = 320
}
document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
}

</script>

之後,在寫css時,只要將px單位替換成rem,這裡設定的比例是100px=1rem,例如,寬度為100px時,可以直接寫成1rem。