paramètres rem de disposition de la vue

Vue.js est un framework JavaScript moderne pour créer des interfaces utilisateur. Sa flexibilité et son évolutivité en font l’un des frameworks de développement front-end les plus populaires. Il est très simple d'utiliser rem pour implémenter une mise en page réactive dans Vue.js. Nous allons présenter ici comment utiliser rem pour implémenter une mise en page réactive dans Vue.js.

1. Qu'est-ce que Rem ?

Rem est une unité relative, qui est calculée en fonction de la largeur de la fenêtre d'affichage. Cela signifie "mise à l'échelle proportionnellement en fonction de la taille de la police de l'élément racine". Par exemple, si la taille de police de l'élément racine est de 10 px, alors 1rem sera égal à 10 px. Si la taille de police de l'élément racine est de 20 px, alors 1rem sera égal à 20 px.

L'avantage d'utiliser Rem pour un design réactif est que lorsque l'utilisateur redimensionne la fenêtre du navigateur, les éléments de la page seront mis à l'échelle en conséquence, conservant ainsi la relation de taille relative, la rendant lisible et utilisable sur différents appareils.

2. Set Rem

Dans Vue.js, nous pouvons utiliser le code suivant pour définir 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()
})

Dans le code ci-dessus, nous définissons d'abord une valeur de base baseSize. définissez la valeur de base sur la taille du brouillon de conception (en supposant que la taille du brouillon de conception est de 1 920 px). Ensuite, une fonction setRem est définie, qui est utilisée pour calculer la taille de la police et la valeur rem en fonction de la largeur actuelle de la fenêtre. Enfin, lors de l'initialisation, appelez la fonction setRem pour définir la valeur rem actuelle et utilisez window.addEventListener pour écouter les événements de changement de taille de la fenêtre afin que la valeur rem puisse être réinitialisée. lorsque la taille de la fenêtre change. 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

Utiliser Rem dans Vue
4. Avec rem configuré, vous pouvez l'utiliser dans Vue.js pour une mise en page réactive. La méthode d'utilisation de rem dans un composant est la suivante :
rrreee

Dans le code ci-dessus, nous définissons d'abord un style .container, qui a pour effet de fixer la largeur et l'alignement central. Dans le style .box, nous utilisons margin pour mettre une certaine distance entre l'élément et .container. Définissez la valeur du style sur une valeur rem pour lui permettre d'évoluer de manière réactive en fonction de la taille de la fenêtre.

Conclusion🎜🎜🎜 L'utilisation de Rem pour une mise en page réactive dans Vue.js est une méthode courante qui peut nous aider à mieux nous adapter aux différents appareils et tailles de fenêtres. En utilisant Rem, la taille de la police et la valeur rem peuvent être calculées en fonction de la taille de la fenêtre et appliquées dans le style. Configurer Rem dans Vue.js est aussi simple que d'écrire du code JavaScript. 🎜🎜Bien sûr, il existe d'autres moyens d'implémenter une mise en page réactive, comme l'utilisation de frameworks CSS tels que Bootstrap. En comparaison, la méthode d'utilisation de Rem est plus flexible et peut répondre à des besoins plus personnalisés. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!