Fonctions de comparaison en CSS : max(), min(), clamp()

Cet article vous présentera les trois fonctions de comparaison max(), min() et clamp() en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandé : "Tutoriel vidéo CSS"

Fonction de comparaison CSS

Il existe trois fonctions de comparaison CSS :

• max()
• min()
• clamp()

min et max

Les fonctions CSS min et max sont similaires aux fonctions min et max dans les fonctions js. Elles sont utilisées pour prendre la valeur minimale ou maximale parmi plusieurs attributs. Les attributs sont séparés par des virgules. L'exemple est le suivant

      width: min(100px,200px,300px); //取值100px
      height: max(100px,200px,300px); //取值300px

Comme le montre l'image, la largeur prend la valeur minimale de 100 px et la hauteur prend la valeur maximale de 300 px.

clamp

fonction de serrage Trois paramètres doivent être transmis, une valeur minimale, une valeur par défaut et une valeur maximale, qui sont utilisées pour gérer les valeurs limites lorsque la valeur par défaut. est supérieure à la valeur maximale, la valeur maximale est prise. Lorsqu'elle est inférieure à la valeur minimale, la valeur minimale est prise. Lorsque la valeur est comprise entre le minimum et le maximum, la valeur par défaut est utilisée.

Comment utiliser

clamp(MIN,DEFAULT,MAX)

la pince est équivalente à max(MIN,min(DEFAULT,MAX))

Case

font-size: clamp(20px,10vw,40px);

Selon l'analyse, lorsque 10vw est inférieur à 20px, c'est-à-dire lorsque la largeur de la page est inférieure ou égale à 200px, la police minimale est de 20px. Lorsque 10vw est supérieur à 40px, c'est-à-dire lorsque. la largeur de la page est supérieure ou égale à 400px, la police maximale est de 40px- A 200px- Entre 400px, le calcul est basé sur la formule de calcul de largeur/10 Vérifiez ci-dessous que

est inférieur à 200px<.>

est supérieur à 400px

Entre 200px et 400px

Compatibilité

Vous pouvez voir ceci. Les trois fonctions ne sont sorties que récemment, donc la compatibilité n'est pas très bonne. Les navigateurs nationaux sont tous bloqués et les dernières versions du grand public. les navigateurs peuvent essentiellement le prendre en charge. C'est une bonne chose, en raison du rôle de ces trois mathématiques dans le développement réactif, il est encore évident que la proportion de ces trois fonctions dans le développement réactif pourrait augmenter progressivement à l'avenir.

Scénarios d'utilisation courants

Ce qui suit répertorie plusieurs

scénarios d'utilisation courants

Réponse de la barre latérale

La disposition des colonnes latérales nécessite un paramètre fixe largeur de la barre latérale Lorsque vous créez un style réactif, vous pouvez envisager de fixer la proportion de la barre latérale via vw lorsque la largeur maximale est dépassée

      aside {
        background: #ccc;
        flex-basis: max(30vw, 150px);
      }
      main {
        background: #09acdd;
        flex-grow: 1;
      }

Réponse de la police

Limitez les valeurs maximales et minimales via le serrage, puis la valeur par défaut au milieu change en fonction de la fenêtre d'affichage

font-size: clamp(20px, 10vw, 40px);

Transition en douceur du dégradé

Dégradé spécifie la ligne de dégradé du dégradé. Selon le fonctionnement général, la transition ne sera pas assez fluide. Il y aura une ligne de transition évidente sur le terminal mobile

background: linear-gradient(135deg, #2c3e50, #2c3e50, #3498db);

. Utilisez min pour le modifier, et la transition sera plus fluide

background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);

Conteneur dynamique width

Dans les applications pratiques, par exemple, si nous Si vous souhaitez limiter la largeur sur le bureau et afficher 100% sur le mobile, vous devez écrire

    .container{
      width: 1440px;
      max-width: 100%;
    }

Il ne vous reste plus qu'à écrire

    .container{
      width: min(1440px,100%);
    }

.

rrreee

, qui est très concis et clair.

Résumé

Ces trois fonctions conviennent au développement de mises en page réactives. Elles peuvent être utilisées de manière appropriée lorsque les problèmes de compatibilité ne doivent pas être pris en compte. Cependant, si vous souhaitez prendre en compte la compatibilité, il est préférable de ne pas l'utiliser. J'ai récemment résumé les choses liées aux fonctions CSS. Vous pouvez continuer à faire attention. Le code source est ici Cliquez ici et cliquez ici

.

Pour plus de connaissances sur la programmation, veuillez visiter : Apprendre la programmation ! !

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!