Vue-Layout-REM-Einstellungen

Vue.js ist ein modernes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Seine Flexibilität und Skalierbarkeit machen es zu einem der beliebtesten Front-End-Entwicklungsframeworks. Es ist sehr einfach, rem zum Implementieren eines responsiven Layouts in Vue.js zu verwenden. Hier stellen wir vor, wie man rem zum Implementieren eines responsiven Layouts in Vue.js verwendet.

1. Was ist Rem?

Rem ist eine relative Einheit, die basierend auf der Breite des Ansichtsfensters berechnet wird. Es bedeutet „proportionale Skalierung basierend auf der Schriftgröße des Stammelements“. Wenn die Schriftgröße des Stammelements beispielsweise 10 Pixel beträgt, entspricht 1rem 10 Pixel. Wenn die Schriftgröße des Stammelements 20 Pixel beträgt, entspricht 1rem 20 Pixel.

Der Vorteil der Verwendung von Rem für responsives Design besteht darin, dass die Elemente auf der Seite entsprechend skaliert werden, wenn der Benutzer die Größe des Browserfensters ändert, wodurch das relative Größenverhältnis beibehalten und die Anzeige auf verschiedenen Geräten erleichtert wird und Benutzerfreundlichkeit.

2. Set Rem

In Vue.js können wir den folgenden Code verwenden, um rem festzulegen:

// 设置基准值
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()
})

Im obigen Code definieren wir zunächst einen Basiswert baseSize. Normalerweise legen wir den Basiswert auf die Größe des Designentwurfs fest (vorausgesetzt, die Größe des Designentwurfs beträgt 1920 Pixel). Als nächstes wird eine setRem-Funktion definiert, mit der die Schriftgröße und der REM-Wert basierend auf der aktuellen Fensterbreite berechnet werden. Rufen Sie abschließend während der Initialisierung die Funktion setRem auf, um den aktuellen REM-Wert festzulegen, und verwenden Sie window.addEventListener, um auf Fenstergrößenänderungsereignisse zu warten, damit der REM-Wert zurückgesetzt werden kann wenn sich die Fenstergröße ändert. baseSize，通常情况下，我们会将基准值设置为设计稿的尺寸（这里假设设计稿尺寸为 1920px）。接下来定义了一个 setRem 函数，它用于根据当前窗口宽度计算字体大小和 rem 值。最后在初始化时，调用 setRem 函数来设置当前的 rem 值，并使用 window.addEventListener 监听窗口大小变化事件，以便在窗口大小变化时重新设置 rem 值。

3. 在 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 in Vue verwenden
4. Mit dem Set Rem können Sie es in Vue.js verwenden. Es verfügt über ein responsives Layout . Die Methode zur Verwendung von rem in einer Komponente ist wie folgt:
rrreee

Im obigen Code legen wir zunächst einen .container-Stil fest, der den Effekt einer festen Breite und Mitte hat Ausrichtung. Im .box-Stil verwenden wir margin, um einen bestimmten Abstand zwischen dem Element und .container festzulegen. Legen Sie den Wert im Stil auf einen REM-Wert fest, damit er entsprechend der Fenstergröße skaliert werden kann.

Fazit#🎜🎜##🎜🎜##🎜🎜#Die Verwendung von Rem für responsives Layout in Vue.js ist eine gängige Methode, die uns helfen kann, uns besser an verschiedene Geräte und Fenster anzupassen Größen. Mithilfe von Rem können die Schriftgröße und der Rem-Wert basierend auf der Größe des Ansichtsfensters berechnet und im Stil angewendet werden. Das Einrichten von Rem in Vue.js ist so einfach wie das Schreiben von JavaScript-Code. #🎜🎜##🎜🎜#Natürlich gibt es auch andere Möglichkeiten, ein responsives Layout zu erreichen, beispielsweise die Verwendung von CSS-Frameworks wie Bootstrap. Im Vergleich dazu ist die Verwendung von Rem flexibler und kann individuellere Anforderungen unterstützen. #🎜🎜#

Das obige ist der detaillierte Inhalt vonVue-Layout-REM-Einstellungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!