vue佈局rem設定-前端問答-PHP中文網

vue佈局rem設定

王林

發布： 2023-05-27 21:52:38

原創

1558 人瀏覽過

Vue.js 是一種用於建立使用者介面的現代 JavaScript 框架。它的靈活性和可擴展性，使其成為最受歡迎的前端開發框架之一。在 Vue.js 中使用 rem 實作響應式佈局非常簡單，以下將介紹如何使用 rem 在 Vue.js 中進行響應式佈局。

什麼是 Rem？

Rem 是一個相對單位，它是根據視窗寬度來計算的，它的意思是「根據根元素的字體大小進行等比縮放」。例如，如果根元素的字體大小為 10px，則 1rem 將等於 10px。如果根元素的字體大小為 20px，則 1rem 將等於 20px。

使用Rem 進行響應式設計的好處是，當使用者調整瀏覽器視窗大小時，頁面中的元素將隨之縮放，從而保持相對大小關係，使其在不同裝置上呈現可讀性和易用性。

設定Rem

在Vue.js 中，我們可以使用以下程式碼設定rem：

// 设置基准值
const baseSize = 32 // 设计图尺寸（1920px）/ 60

// 设置 rem 函数
function setRem () {
  const scale = document.documentElement.clientWidth / 1920
  document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 1)}px`
}

// 初始化
setRem()

// 改变窗口大小时重新设置 rem
window.addEventListener('resize', () => {
  setRem()
})

登入後複製

在上述程式碼中，我們先定義了一個基準值baseSize，通常情況下，我們會將基準值設定為設計稿的尺寸（這裡假設設計稿尺寸為1920px）。接下來定義了一個 setRem 函數，它用於根據當前視窗寬度計算字體大小和 rem 值。最後在初始化時，呼叫 setRem 函數來設定目前的 rem 值，並使用 window.addEventListener 監聽視窗大小變更事件，以便在視窗大小變更時重新設定 rem 值。

在 Vue 中使用 Rem

有了設定好的 rem，接下來就可以在 Vue.js 中使用它進行響應式佈局了。在元件中使用 rem 的方法如下：

<template>
  <div class="container">
    <div class="box" :style="{ width: '32rem', height: '18rem' }"></div>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<style scoped>
.container {
  width: 60rem;
  margin: 0 auto;
}

.box {
  background-color: #F00;
  margin: 2rem auto;
}
</style>

登入後複製

在上述程式碼中，我們首先設定了一個 .container 樣式，該樣式具有固定寬度和居中對齊的效果。在 .box 樣式中，我們使用了 margin 來讓元素與 .container 有一段距離。將樣式中的值設為 rem 值，使其能夠根據視窗大小進行響應式縮放。