Comment résoudre le problème de la hauteur en ajustant l'unité REM dans la conception adaptative?

Conception adaptative: résolvez intelligemment le problème du réglage de la hauteur

Dans la conception réactive, un contrôle précis de la hauteur des éléments de la page est souvent un mal de tête. Surtout lorsque la barre d'outils en haut du navigateur prend de la place, ce qui entraîne la hauteur réelle visible que la hauteur du projet de conception, comment s'assurer que la hauteur des éléments de la page est cohérente avec le projet de conception est devenu un défi majeur pour les développeurs.

Supposons que la taille du projet de conception est de 1920x1080 pixels, mais l'existence de la barre d'outils du navigateur rend la hauteur visuelle réelle inférieure à 1080 pixels. Si vous utilisez directement les unités REM et définissez la font-size du body en fonction de la largeur du projet de conception, la disposition de la page est susceptible d'être biaisée.

Vous avez peut-être essayé le schéma REM en fonction de l'adaptation de la largeur:

 Export const SelfAdapter = () => {
  Soit DesignWidth = 1920; // Concevoir la largeur du projet Soit Html = document.DocumentElement;
  Soit ww = html.clientwidth; // Largeur de la fenêtre LET REM = (WW * 100) / DesignWidth;
  html.style.fontsize = rem "px";

  const Resize = () => {
    Soit REM = (WW * 100) / DesignWidth;
    html.style.fontsize = rem "px";
  };

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

Ce schéma calcule la valeur REM en fonction de la largeur de la fenêtre, ignorant le changement de hauteur. Pour répondre aux différences de hauteur causées par la barre d'outils du navigateur, une stratégie plus efficace consiste à calculer la valeur REM basée sur la hauteur visuelle de la fenêtre.

Le code modifié est le suivant:

 Export const SelfAdapter = () => {
  Soit DesignHeight = 1080; // Concevoir la hauteur du projet Laissez html = document.DocumentElement;
  Soit wh = html.clientHeight; // hauteur de fenêtre Soit REM = (WH * 100) / DesignHeight;
  html.style.fontsize = rem "px";

  const Resize = () => {
    Soit Rem = (Wh * 100) / DesignHeight;
    html.style.fontsize = rem "px";
  };

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

En utilisant clientHeight pour obtenir la hauteur visuelle de la fenêtre et calculer la valeur REM en fonction de la hauteur du projet de conception, l'écart de hauteur de la page causé par la barre d'outils du navigateur peut être résolu efficacement, garantissant que la hauteur de l'élément de page est cohérente avec le projet de conception et d'éviter le désalignement de l'interface utilisateur. Cela permet de convertir 100px dans le projet de conception en 1REM avec précision dans le navigateur.

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!