一.在使用vue-cli搭建好專案框架後,在目錄結構的index.html檔案中新增一段js**:
fnresize();
window.onresize = function ()
function fnresize()
if (devicewidth <= 320)
document.documentelement.style.fontsize = (devicewidth / 7.5) + 『px』;
}然後在寫css就可以將px單位換成rem.
這裡設定的比例是100px=1rem,
例如:寬度為100px時,可以直接寫成1rem
二.vue cli3.0 rem 使用
首先安裝amfe-flexible外掛程式，在main.js裡引入
1、npm i amfe-flexible
2、import 『amfe-flexible』
然後再，安裝postcss-px2rem外掛程式
npm i postcss-px2rem
在package.json中配置
「postcss」: ,
「postcss-px2rem」: }}
說明，我這裡用的是vue-cli3.0腳手架。在.vue檔案裡。樣式直接寫px單位就可以了。在瀏覽器檢視時會自動轉換為rem單位。如果字型還想用px。那就這樣將px大寫。就不會編譯為rem單位了。樣式就可以實現px。
vue 中使用rem布局
在用vue或react等工具搭建乙個移動端專案時,怎樣做到自適應呢?當然選擇rem布局比較方便快捷.此處已vue為例,在使用vue cli搭建好專案框架後,在目錄結構的index.html檔案中新增一段js fnresize window.onresize function function fnr...
vue中使用rem布局
使用的是vue cli4 方式一 在public下的index.html頁面中新增如下js fnresize window.onresize function function fnresize if devicewidth 320 document.documentelement.style.fo...
vue 專案使用 rem 布局
使用 vue cli 構建專案完成後，在index.html檔案內新增如下 相容uc豎屏轉橫屏出現的bug 自定義設計稿的寬度 designwidth 最大寬度 maxwidth 這段js的最後面有兩個引數記得要設定，乙個為設計稿實際寬度，乙個為製作稿最大寬度，例如設計稿為750，最大寬度為750，...