Résumer l'utilisation des attributs de largeur minimale min-width et de largeur maximale max-width en CSS

L'attribut CSS width est la largeur du mot, et width width comprend deux attributs importants : l'attribut de largeur maximale max-width et l'attribut de largeur minimale min-width. L'attribut max-width (max-width) est utilisé pour définir la valeur maximale de la largeur d'affichage. Lorsque la bordure du navigateur est déplacée pour rendre la plage d'affichage plus grande que la largeur maximale, l'élément . affiche la largeur définie par la valeur de largeur maximale. Dans la valeur d'attribut de largeur maximale, trois valeurs d'attribut peuvent être utilisées, à savoir la valeur automatique, la valeur de longueur et la valeur en pourcentage ; l'attribut de largeur minimale (min-width) est utilisé pour définir la valeur minimale de la largeur ; affichage. Lors du glissement Lorsque la bordure du navigateur est déplacée pour rendre la plage d'affichage plus petite que la largeur minimale, l'élément affiche la largeur définie par la valeur de largeur minimale Dans l'attribut de largeur minimale, trois valeurs d'attribut. peuvent être utilisés, à savoir la valeur automatique, la valeur de longueur et la valeur en pourcentage. Cet article résumera l'utilisation des deux attributs max-width et min-width.

Utilisation des attributs min-width et max-width

1. Compatible avec la largeur minimale et la hauteur minimale d'IE6

Si un site Web est en écran large et que vous faites glisser la fenêtre du navigateur vers la gauche ou la droite, la largeur du site Web changera avec la taille de la fenêtre, et la fenêtre du navigateur Une fois la largeur réduite dans une certaine mesure, la barre de défilement ci-dessous apparaîtra et la largeur du site Web ne sera plus réduite. Nous savons que cette fonction simple peut être facilement réalisée en utilisant la largeur minimale du CSS, mais. malheureusement, nous, IE6, qui compte de nombreux utilisateurs, ne prenons pas en charge cet attribut très pratique. Que devons-nous faire ? Il nous suffit d'ajouter l'instruction CSS suivante lors de la conception de la page Web pour résoudre le problème.

2. Expliquez en détail la relation et l'utilisation entre l'attribut @media et (max-width:) et (min-width)

largeur/hauteur définit le périphérique de sortie La largeur/hauteur de la zone visible de la page.

max/min-width/height définit la largeur/hauteur maximale/minimale de la zone visible de la page dans le périphérique de sortie.

device-width/height définit la largeur/hauteur de l'écran visible du périphérique de sortie.

max/min-device-width/height définit la largeur/hauteur visible maximale/minimale de l'écran du périphérique de sortie.

3. Notes d'étude de mise en page CSS - largeur maximale

Définir la largeur d'un élément au niveau du bloc peut l'empêcher de remplir le conteneur de gauche à droite. Ensuite, vous pouvez définir les marges gauche et droite sur automatique pour les centrer horizontalement. L'élément occupera la largeur que vous spécifiez, puis la largeur restante sera divisée en deux marges gauche et droite.

Le seul problème est que lorsque la fenêtre du navigateur est plus étroite que la largeur de l'élément, le navigateur affiche une barre de défilement horizontale pour s'adapter à la page. L'utilisation de max-width au lieu de width dans ce cas permet au navigateur de mieux gérer les situations de petites fenêtres.

4. jquery implémente la mise à l'échelle de l'image et la largeur maximale n'est pas compatible dans IE

est en cours de traitement. Lors du chargement d'images sur des pages Web, en particulier dans certaines applications de liste d'images, il est difficile de garantir que les images sont de taille uniforme. La définition directe de la taille de l'image entraînera l'étirement et le flou de l'image. Le code introduit dans cet article peut automatiquement. ajustez l’image proportionnellement une fois la taille de l’image chargée. La largeur maximale et la hauteur maximale sont incompatibles dans ie6. Ces problèmes peuvent être résolus avec jQuery.

5. Laissez IE6 prendre en charge la largeur minimale min-width

Je pense que beaucoup de gens utilisent cette méthode pour y parvenir. la plus petite taille de conteneur, la largeur, est souvent perturbée par des plantages inexplicables. Il y a deux points à souligner : 1. Les éléments représentant la fenêtre d'affichage en mode standard et en mode bizarre d'IE6 sont différents. , et ce dernier Ensuite, c'est ; 2. IE6-Dans les deux modes différents ci-dessus, il a des représentations différentes du débordement du contenu contenu, ce qui conduit à une boucle infinie dans le jugement d'affectation.

Questions et réponses connexes

1 Écran @media et (largeur min : 800 px)

2.

Demandez quelle est la différence entre la largeur maximale et la largeur maximale de l'appareil

3

À propos de la largeur maximale invalide du CSS <.>

[Recommandations associées]

1. Entrée du site Web PHP chinois :

min-width

2. Entrée du site Web chinois php : largeur maximale

3. Tutoriel vidéo gratuit du site Web chinois php : Tutoriel vidéo CSS

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!