vue 專案使用 rem 布局

2021-09-09 05:40:33 字數 684 閱讀 5447

使用 vue-cli 構建專案完成後,在index.html檔案內新增如下**:

//相容uc豎屏轉橫屏出現的bug

//自定義設計稿的寬度:designwidth

//最大寬度:maxwidth

//這段js的最後面有兩個引數記得要設定,乙個為設計稿實際寬度,乙個為製作稿最大寬度,例如設計稿為750,最大寬度為750,則為(750,750)

; (function (designwidth, maxwidth) ';

}if (docel.firstelementchild) else

//要等 viewport 設定好後才能執行 refreshrem,不然 refreshrem 會執行2次;

refreshrem();

win.addeventlistener("resize", function () , false);

win.addeventlistener("pageshow", function (e)

}, false);

if (doc.readystate === "complete") else , false);

}})(750, 750);

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

vue 中使用rem布局

在用vue或react等工具搭建乙個移動端專案時,怎樣做到自適應呢?當然選擇rem布局比較方便快捷.此處已vue為例,在使用vue cli搭建好專案框架後,在目錄結構的index.html檔案中新增一段js fnresize window.onresize function function fnr...

vue 中使用rem布局

一.在使用vue cli搭建好專案框架後,在目錄結構的index.html檔案中新增一段js fnresize window.onresize function function fnresize if devicewidth 320 document.documentelement.style.f...

vue中使用rem布局

使用的是vue cli4 方式一 在public下的index.html頁面中新增如下js fnresize window.onresize function function fnresize if devicewidth 320 document.documentelement.style.fo...