在現代web應用開發中，使用響應式布局已經不可避免了，而為了實現響應式布局，多數開發人員使用了rem，用來代表基于根元素的相對長度單位。對于現代庫和框架來說，Vue是其中之一。

使用rem的方式基本都是基于屏幕尺寸來定義固定大小的html元素，這基本原則需要在Vue應用中被遵循。Vue沒有內置rem的支持，因此我們需要依賴于CSS/樣式文件來引入其支持：

html {
font-size: 10px;
}
@media (min-width: 320px) {
html {
font-size: 12px;
}
}
@media (min-width: 480px) {
html {
font-size: 16px;
}
}
@media (min-width: 768px) {
html {
font-size: 20px;
}
}
@media (min-width: 1024px) {
html {
font-size: 24px;
}
}

在上述樣式文件中，我們定義基礎的html元素字體大小為10px。然后我們通過媒體查詢，對于屏幕尺寸逐漸增大的情況，我們在每一步逐漸增加html元素的字體大小。這就使得基于rem的相關CSS定義也會超越根元素字體大小的基本限制。在這一過程中，我們可以使用下面的示例代碼對Vue進行配置：

import Vue from "vue";
import "./rem.css";
Vue.config.productionTip = false;
new Vue({
render: h =>h(App)
}).$mount("#app");

在以上代碼中，我們引入之前定義的樣式文件。然后我們使用Vue的配置功能來禁用生產線程錯誤提示，創建一個新的Vue實例，并將其掛載到根DOM元素上。因為我們的樣式表已經被載入，我們現在可以安全地使用rem來定義其他元素。

例如，我們可以用下面的代碼定義一個具有自適應高度的div元素：

.container {
height: 20rem;
background-color: #eee;
}
.inner-box {
width: 50%;
height: 50%;
background-color: #ccc;
}

這將使我們的容器元素的高度自適應屏幕大小或瀏覽器窗口大小的改變，取決于我們在之前樣式表中定義的html元素字體大小。內部div元素采用rem定義，它們也會自適應父元素的大小。這就是使用Vue中的rem實現響應式布局的簡單方法，我們可以自由地按照需求擴展和定義。