Conseils pour ajuster la hauteur des lignes en fonction de la taille de l'écran à l'aide des unités CSS Viewport vmin et vmax-tutoriel CSS-php.cn

Conseils pour ajuster la hauteur des lignes en fonction de la taille de l'écran à l'aide des unités CSS Viewport vmin et vmax

王林

Libérer： 2023-09-13 09:52:44

original

1004 Les gens l'ont consulté

使用 CSS Viewport 单位 vmin 和 vmax 来实现根据屏幕尺寸调整行高的技巧

Utilisez les unités CSS Viewport vmin et vmax pour mettre en œuvre la technique d'ajustement de la hauteur des lignes en fonction de la taille de l'écran

De nos jours, le taux de pénétration des appareils mobiles est de plus en plus élevé Afin d'améliorer l'expérience utilisateur, la conception Web. doit avoir une bonne mise en page réactive. Lors de la conception réactive, un problème souvent rencontré est de savoir comment ajuster la hauteur des lignes en fonction de la taille de l'écran. Heureusement, les unités CSS Viewport - vmin et vmax peuvent nous aider à atteindre cet objectif.

Les unités vmin et vmax spécifient respectivement un ensemble d'unités de longueur calculées par rapport à la largeur ou à la hauteur de la fenêtre. vmin spécifie une valeur de longueur qui est la plus petite entre la largeur et la hauteur de la fenêtre. vmax spécifie une valeur de longueur qui fait référence à la plus grande largeur et hauteur de la fenêtre d'affichage.

Supposons que nous ayons une page contenant plusieurs lignes de texte. Nous souhaitons que la hauteur de la ligne de texte s'adapte automatiquement lorsque la largeur ou la hauteur de la fenêtre change. Vous trouverez ci-dessous les étapes de mise en œuvre et les exemples de code correspondants.

Tout d'abord, nous devons définir une valeur de base. Lorsque la largeur ou la hauteur de la fenêtre est de 100 vmin, la hauteur de la ligne est définie sur 1 vmin. De cette façon, lorsque la largeur ou la hauteur de la fenêtre est inférieure ou égale à 100vmin, nous pouvons garantir que la hauteur de la ligne ne dépassera pas la largeur ou la hauteur de la fenêtre.

html, body {
height : 100%;
margin : 0;
padding : 0;
}

.container {
height : 100vh / Définissez la hauteur du conteneur sur la hauteur de la fenêtre d'affichage/
}

.text {
font-size: 1.5rem;
line-height: 1vmin; / Définir la hauteur de la ligne sur 1vmin /
}

Ensuite, nous pouvons inclure plusieurs lignes de texte dans un conteneur et définir la hauteur du conteneur Défini sur la hauteur de la fenêtre d'affichage afin que le texte remplisse complètement le conteneur. Dans le même temps, nous définissons également la taille de la police du texte à 1,5rem pour garantir la lisibilité du texte.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nulla laoreet mollis nisi, id interdum mi commodo quis Sempre magna id vehicula pellentesque.

Nunc ex nibh, feugiat at With Avec le code ci-dessus, nous avons terminé l'opération d'ajustement de la hauteur des lignes en fonction de la taille de l'écran. Sous différentes tailles de fenêtre, la hauteur de ligne du texte sera mise à l'échelle en conséquence en fonction de la taille actuelle de la fenêtre.

Il est important de noter que puisque vmin et vmax sont calculés par rapport à la taille de la fenêtre d'affichage, il convient de faire preuve de prudence lors de l'utilisation de ces unités pour éviter d'augmenter ou de réduire excessivement les éléments. De plus, les différents navigateurs peuvent présenter des différences dans la façon dont ils calculent la taille de la fenêtre d'affichage, de sorte que l'utilisation réelle peut être légèrement différente.

Pour résumer, l'utilisation des unités CSS Viewport vmin et vmax permet d'ajuster facilement la hauteur de la ligne en fonction de la taille de l'écran. En ajustant dynamiquement la hauteur des rangées, nous pouvons obtenir une conception réactive plus flexible et adaptable. Cette technique peut améliorer l'expérience utilisateur sur divers appareils mobiles et permettre à nos pages Web de mieux s'adapter aux différentes tailles d'écran.

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!