vue 中使用rem布局

在用vue或react等工具搭建一個移動端項目時,怎樣做到自適應呢? 當然選擇rem布局比較方便快捷.
此處已vue為例,在使用vue-cli搭建好項目框架后,在目錄結構的index.html文件中添加一段js代碼:

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';
}

然后在寫css就可以將px單位換成rem.
這里設置的比例是100px=1rem,
例如:寬度為100px時,可以直接寫成1rem

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容