Maison > interface Web > tutoriel CSS > le corps du texte

Comment utiliser la largeur minimale CSS

不言
Libérer: 2018-11-24 10:48:39
original
4508 Les gens l'ont consulté

min-width vous permet de définir la largeur minimale d'un élément. Il est souvent utilisé avec la réponse de largeur maximale. Dans cet article, nous examinerons l'utilisation spécifique de min-. largeur en CSS.

Voyons d'abord ce qu'est la largeur minimale ?

L'attribut min-width permet de définir la largeur minimale d'un élément.

Comment utiliser l'attribut min-width ?

Par exemple, pour "nous permettre de visualiser facilement n'importe quelle taille de navigateur", disons que vous disposez d'un élément pour créer un site Web réactif, vous pouvez définir la largeur du contenu sur width : 30 % ;

Si vous le voyez dans un petit navigateur horizontal sur un smartphone, etc., il deviendra plus petit que la cible Même si vous n'utilisez pas spécifiquement de requêtes multimédias pour définir d'autres valeurs, vous devez utiliser une valeur numérique. (px) pour définir min -width, afin que la taille réelle ne soit pas inférieure à cette valeur.

Regardons un exemple spécifique

Si CSS est appliqué au HTML suivant, la réduction de la largeur du navigateur ne sera pas inférieure à la largeur spécifiée par max- largeur .

HTML

 <div class ="container"> 
  <div class ="box"> 
    <p>请尝试更改浏览器宽度。<br> min-width:200px;已经设置,它
    不会小于200px。</p> 
  </div>
Copier après la connexion

CSS

.box{
  width: 30%;
  height: 200px;
  min-width: 200px;
  background-color: #66b6d5; 
}
Copier après la connexion

L'effet est le suivant :

Comment utiliser la largeur minimale CSS

Cet article se termine ici C'est fini. Pour plus d'informations sur les propriétés en CSS, vous pouvez regarder le Tutoriel vidéo CSS sur le site php chinois pour apprendre ! ! !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal