Explication détaillée de l'instruction Vue pour implémenter l'adaptation de la résolution des éléments du grand écran

Cet article vous apporte des connaissances pertinentes sur vue. Il présente principalement l'explication détaillée des instructions de Vue pour implémenter l'adaptation de la résolution des éléments sur grand écran, y compris les schémas d'adaptation courants et les schémas de mise à l'échelle CSS, etc. Jetons un coup d'œil, j'espère que cela aidera tout le monde. .

[Recommandations associées : Tutoriel vidéo javascript, Tutoriel vue.js]

Avec le développement continu de la technologie front-end, la mise à niveau continue de concepts tels que les centres de données (plateformes intermédiaires) et la développement des appareils Internet des objets Mis à jour et popularisé, de plus en plus de propriétaires (projets) aiment ajouter un ou plusieurs grands écrans visuels au système pour afficher les changements de données, les changements d'emplacement, etc. de manière centralisée. Les patrons préfèrent également l'appeler. "situation" .

Bien sûr, les programmeurs ne se soucient généralement pas de ce que pensent les « patrons », du moment qu’ils terminent le projet. Mais il y a souvent un problème comme celui-ci : j'ai un modèle grand écran, mais la résolution du navigateur de l'utilisateur n'est pas suffisante, ou certains ont une barre de favoris et d'autres non, ou certains sont en plein écran et d'autres ne sont que de petites fenêtres. De cette manière, le code doit s'adapter à différents scénarios de résolution.

1. Solutions d'adaptation courantes

Les solutions d'adaptation côté Web que nous utilisons habituellement incluent principalement les suivantes :

• vw/vh est implémenté avec un pourcentage, permettant aux éléments de s'ajuster automatiquement en fonction de la taille de la fenêtre
• fontSize Coopérer avec rem pour réaliser l'unification de la "largeur de l'unité"
• Ajustez la mise en page en fonction de différentes plages de résolution
• Mise en page centrale, coopérez avec la largeur minimale

À l'heure actuelle, les principes de la plupart des solutions d'adaptation d'écran sont basés sur ce qui précède , mais ces méthodes ont aussi de gros inconvénients : Le texte du navigateur a une taille minimale !

Sur les écrans ordinaires avec une résolution de 1080p et plus, les proportions et les effets d'affichage de la plupart des dessins de conception peuvent être parfaitement restaurés. Cependant, s'il y a trop de contenu de page dans un certain système, ou si la résolution utilisée par le navigateur (et non la résolution physique) ne répond pas à toutes les exigences d'affichage, l'utilisation des méthodes ci-dessus peut réduire la taille calculée du texte. que la taille du navigateur. La taille de police minimale du navigateur À ce stade, le style de la page peut s'effondrer car la largeur du texte dépasse l'élément.

La disposition centrale et la largeur minimale peuvent garantir l'effet d'affichage, mais elles ne conviennent pas aux projets sur grand écran.

2. Solution de mise à l'échelle CSS3

Lorsque les solutions ci-dessus ne sont pas satisfaites, tout le monde utilisera généralement une autre solution : la mise à l'échelle CSS3.

Ajustez dynamiquement le rapport de mise à l'échelle des éléments en calculant le rapport de taille du dessin de conception et la taille réelle de la zone d'affichage de la page.

Personnellement, je pense que c'est le meilleur moyen de préserver le contenu et le style d'affichage sous une petite résolution.

Bien sûr, cette méthode présente encore quelques inconvénients :

Après la mise à l'échelle, l'affichage des bords peut être flou
• S'il y a un élément de canevas à l'intérieur, le contenu à l'intérieur du canevas peut être déformé
• Amap 1 .x provoquera des événements Décalage de coordonnées (corrigé dans la version 2.0)
• ...

3. Encapsuler une instruction de mise à l'échelle

Voici un bref aperçu des instructions personnalisées de Vue : en configurant des instructions personnalisées et des paramètres de liaison, dans le composant/élément La logique de traitement correspondante est exécutée à différents moments tels que le chargement, la mise à jour et la destruction.

Les instructions personnalisées de Vue incluent les fonctions de hook suivantes :

bind : exécuté lorsque la liaison de l'instruction est analysée, exécutée une seule fois
• inserted : exécuté lorsque le nœud parent est inséré
• update : exécuté lorsque le composant déclenche une mise à jour
componentUpdated : exécuté une fois que tous les composants ont été mis à jour
• unbind : exécuté lorsque l'élément n'est pas lié (détruit), et exécuté une seule fois

Ici, car nous n'avons besoin que de lier l'événement resize du navigateur pour ajuster le zoom de l'élément lors de l'initialisation, donc seulement Il vous suffit de configurer l'insertion ; bien sûr, afin d'optimiser la logique du code et de réduire la consommation de ressources, vous devez également annuler une fonction de rappel de l'événement de redimensionnement lors de l'étape de dissociation.

Le code est le suivant :

// 缩放指令
import Vue from "vue";
function transformScale(el, options) {
  const { target = "width", origin = "top left" } = options;
  Vue.nextTick(() => {
    // 获取显示区域高宽
    const width = window.innerWidth;
    const height = window.innerHeight;
    el.style.transformOrigin = origin;
    if (target === "ratio") {
      const scaleX = width / CONF.width;
      const scaleY = height / CONF.height;
      el.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
    } else {
      let scaleProportion = 1;
      if (target === "width") {
        scaleProportion = width / CONF.width;
      }
      if (target === "height") {
        scaleProportion = height / CONF.height;
      }
      el.style.transform = `scale(${scaleProportion})`;
    }
  });
}
function inserted(el, binding) {
  const options = binding.options || { passive: true };
  const callback = () => transformScale(el, binding.value);
  window.addEventListener("resize", callback);
  callback();
  el._onResize = {
    callback,
    options
  };
}
function unbind(el) {
  if (!el._onResize) {
    return;
  }
  const { callback } = el._onResize;
  window.removeEventListener("resize", callback);
  delete el._onResize;
}
export const Scale = {
  inserted,
  unbind
};
export default Scale;

Explication : La commande

reçoit un paramètre d'objet pour spécifier la méthode de calcul des proportions et le positionnement de la mise à l'échelle
• Nécessite un objet CONF de configuration globale pour spécifier la taille de page par défaut
• Afin de assurez-vous que la page a Après le chargement, vous pouvez obtenir l'élément dom, vous devez appeler Vue.nextTick
• Vous devez détruire l'événement d'écoute

L'ensemble du code est en fait très simple, il s'agit d'ajuster le taux de zoom de l'élément en écoutant l'événement de redimensionnement.

Mais ici j'ai aussi fait une petite configuration pour m'adapter à plus de situations :

• Recevez une configuration cible pour confirmer la méthode de calcul des proportions ; vous pouvez utiliser la largeur ou la hauteur comme norme de mise à l'échelle unifiée, ou vous pouvez la calculer séparément
• Recevez la configuration d'origine de la transformation pour garantir que les éléments dans différentes positions peuvent être mis à l'échelle différentes positions à éviter Le décalage de mise à l'échelle
• n'implique pas la taille de l'élément lié, seule la taille par défaut est requise ; lors de l'écriture du code, vous pouvez directement configurer la taille de l'élément en fonction du dessin de conception

Bien sûr, cette instruction ne peut pas être considéré comme parfait, il y a encore de nombreuses failles. Par exemple, il n'y a pas d'anti-tremblement, la mise à l'échelle ne modifiera pas la taille spécifiée par CSS et les barres de défilement ont tendance à apparaître

Et parce que le projet précédent en impliquait également beaucoup ; les graphiques et les cartes, cela a souvent causé des problèmes d'affichage, donc il y en aura plus plus tard. Il y a de nouvelles instructions, mais la question de l'adaptation de la résolution doit encore être déterminée en fonction de la situation réelle.

【Recommandations associées : Tutoriel vidéo javascript, Tutoriel vue.js】

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!