Fondation - Requêtes médias

Les requêtes multimédias sont des modules CSS3 qui incluent des fonctionnalités multimédias telles que la largeur, la hauteur, la couleur et affichent le contenu selon la résolution d'écran spécifiée.

Foundation utilise les requêtes multimédias suivantes pour créer des plages de répartition:

  • Small - Utilisé pour n'importe quel écran.

  • Medium - Il est utilisé pour les écrans de 640 pixels et plus.

  • Large - Il est utilisé pour les écrans de 1024 pixels et plus.

Vous pouvez modifier la taille de l'écran à l'aide des classes de points d'arrêt . Par exemple, vous pouvez utiliser la classe .small-6 pour les écrans de petite taille et la classe .medium-4 pour les écrans de taille moyenne, comme illustré dans l'extrait de code suivant -

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Modification des points d'arrêt

Vous pouvez modifier les points d'arrêt si votre application utilise la version SASS de Foundation. Vous pouvez placer le nom des points d'arrêt sous la variable $ breakpoints dans le fichier de paramètres comme indiqué ci-dessous -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

Vous pouvez modifier les classes de points d'arrêt dans le fichier de paramètres en modifiant la variable $ breakpoint-classes . Si vous souhaitez utiliser la classe .large dans le CSS, ajoutez-la à la fin de la liste comme indiqué ci-dessous -

$breakpoints-classes: (small medium large);

Supposons que vous souhaitiez utiliser la classe .xlarge dans le CSS, puis ajouter cette classe à la fin de la liste comme indiqué ci-dessous -

$breakpoints-classes: (small medium large xlarge);

TOUPET

Le Mixin Breakpoint

  • Vous pouvez écrire les requêtes multimédias en utilisant mixin breakpoint () avec @include .

  • Utilisez les mots-clés down ou only avec la valeur du point d'arrêt pour modifier le comportement de la requête multimédia comme indiqué dans le format de code suivant -

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }
   
   // code for medium screens only
   @include breakpoint(medium only) { }
}

Vous pouvez utiliser trois requêtes multimédias portrait , paysage et rétine pour l'orientation de l'appareil ou la densité de pixels et ce ne sont pas des requêtes multimédias basées sur la largeur.

Fonction de point d'arrêt

  • Vous pouvez utiliser la fonctionnalité de mixin breakpoint () en utilisant la fonction interne.

  • La fonctionnalité breakpoint () peut être utilisée directement pour écrire ses propres requêtes multimédias -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Utilisation des requêtes multimédias

  • Le JavaScript Foundation fournit la fonction MediaQuery.current pour accéder au nom du point d'arrêt actuel sur l' objet Foundation.MediaQuery comme spécifié ci-dessous -

Foundation.MediaQuery.current

  • La fonction MediaQuery.current affiche petits , moyens , grands comme noms de points d'arrêt actuels.

  • Vous pouvez obtenir la requête multimédia du point d'arrêt à l'aide de la fonction MediaQuery.get comme indiqué ci-dessous -

Foundation.MediaQuery.get('small')

Référence Sass

Variables

Le tableau suivant répertorie les variables SASS, qui peuvent être utilisées pour personnaliser les styles par défaut du composant -

N ° Sr. Nom et description Type Valeur par défaut
1

$breakpoints

C'est un nom de point d'arrêt qui peut être utilisé pour écrire les requêtes multimédias en utilisant breakpoint () mixin.

 Carte

petit: 0px

moyen: 640px

grand: 1024 px

xlarge: 1 200 px

xxlarge: 1440px
2

$breakpoint-classes

Vous pouvez changer la sortie de la classe CSS en modifiant la variable $ breakpoint-classes .

 liste petit moyen grand

Mixins

Mixins crée un groupe de styles pour créer votre structure de classe CSS pour les composants Foundation.

BREAKPOINT

Il utilise breakpoint () mixin pour créer des requêtes multimédias et inclut les activités suivantes -

  • Si string est passé, alors mixin recherche la chaîne dans la carte $ breakpoints et crée la requête multimédia.

  • Si vous utilisez une valeur de pixel, convertissez-la en valeur em en utilisant $ rem-base .

  • Si la valeur rem est passée, alors il change son unité en em.

  • Si vous utilisez la valeur em, elle peut être utilisée telle quelle.

Le tableau suivant spécifie le paramètre utilisé par le point d'arrêt -

N ° Sr. Nom et description Type Valeur par défaut
1

$value

Il traite les valeurs en utilisant les valeurs de nom de point d'arrêt, px, rem ou em.

 mot-clé ou numéro Aucun

Les fonctions

BREAKPOINT

Il utilise breakpoint () mixin pour créer des requêtes multimédias avec une valeur d'entrée correspondante.

Le tableau suivant spécifie la valeur d'entrée possible utilisée par le point d'arrêt -

N ° Sr. Nom et description Type Valeur par défaut
1

$val

Il traite les valeurs en utilisant les valeurs de nom de point d'arrêt, px, rem ou em.

 mot-clé ou numéro petit

Référence JavaScript

Les fonctions

Il existe deux types de fonctions -

  • .atLeast- Il vérifie l'écran. Il doit être large au moins comme point d'arrêt.

  • .get - Il est utilisé pour obtenir la requête multimédia du point d'arrêt.

Le tableau suivant spécifie le paramètre utilisé par les fonctions ci-dessus -

N ° Sr. Nom et description Type
1

size

Il vérifie et obtient le nom du point d'arrêt pour les fonctions spécifiées respectivement.

 Chaîne