Comment résoudre le problème du désalignement de l'interface causé par un réglage de la hauteur dans la conception adaptative?

Résolvez intelligemment le problème du réglage de la hauteur dans la conception adaptative

Dans la conception réactive, l'ajustement de la hauteur provoque souvent des problèmes de dislocation d'interface. Surtout lorsque la taille du projet de conception (comme 1920x1080 pixels) ne correspond pas à la hauteur visuelle réelle du navigateur, comment maintenir l'intégrité de la disposition de l'interface est cruciale.

Par exemple, lorsque vous utilisez des unités REM pour la mise en page, la taille de la police body définie est de 100px, une hauteur div est 1REM et la hauteur attendue est de 100px. Cependant, la barre d'outils en haut du navigateur occupera une partie de la hauteur, ce qui entraînera une hauteur visible réelle inférieure à la hauteur du projet de conception, et finalement il y aura un désalignement.

Une amélioration est fournie ci-dessous. Le code adaptatif existant est principalement implémenté en ajustant body font-size du corps, et le code est le suivant:

 Export const SelfAdapter = () => {
  // Initialisation de la page, pour les tailles de page qui ne sont pas 1920 * 1080 à l'écran, DesignSize = 1920; // la taille du dessin de conception Soit html = document.DocumentElement;
  Soit ww = html.clientwidth; // Largeur de la fenêtre Soit Rem = (ww * 100) / conceptionSize;
  document.DocumentElement.style.fontize = rem "PX";

  const Resize = () => {
    Soit DesignSize = 1920; // la taille du dessin de conception Soit html = document.DocumentElement;
    Soit ww = html.clientwidth; // Largeur de la fenêtre Soit Rem = (ww * 100) / conceptionSize;
    document.DocumentElement.style.fontize = rem "PX";
  };

  window.addeventListener ("redimensit", redimensi, false);
};

Ce code ne calcule que la valeur rem en fonction de la largeur de la fenêtre, ignorant l'impact des changements de hauteur. La clé de l'amélioration est d'ajuster la base pour calculer rem à la hauteur de la fenêtre ou à la hauteur visible. En surveillant les changements de hauteur de fenêtre, la valeur rem est ajustée dynamiquement, afin de correspondre plus précisément à la hauteur réelle de la zone visible et d'éviter le désalignement de l'interface. Envisagez d'utiliser window.innerHeight pour obtenir la hauteur visuelle de la fenêtre du navigateur et utilisez-la pour le calcul des valeurs rem .

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!