Requêtes multimédias dans SCSS - Un autre moyen pratique d'utiliser l'écran @media

salut!



Récemment, j'ai été confronté au problème des requêtes multimédias dans un projet construit en Angular. Je ne me souviens pas exactement des limites qui m'ont poussé à écrire un mixin pour simplifier mon travail, mais je veux vraiment partager le résultat et obtenir des commentaires. J'ai rencontré beaucoup d'autres exemples similaires, mais pour le travail, il est plus clair et plus pratique pour moi d'utiliser celui-ci.



En général, pour plus de commodité, j'ai fait les exigences suivantes pour moi-même:

1. Les tailles d'écran doivent être rendues séparément, afin que vous puissiez modifier le comportement globalement en un seul endroit (par exemple, au lieu de "320px", transmettez simplement "xs").
2. Ce mixin avec des requêtes multimédias peut être dans plusieurs directions (par exemple, pas toujours uniquement max-width).
3. Mixin peut être utilisé séparément, en remplaçant les classes décrites à l'intérieur, ou décrits dans le corps du parent, en remplaçant ses propriétés.

Définissons donc toutes les autorisations dont nous avons besoin. Par exemple:

$sizes: ("xs":320px, "sm":576px, "md":768px, "lg":992px, "xl":1200px);

Pour commencer, écrivons un mixin qui accepterait le préfixe de plage et la résolution souhaités, sous lesquels nous sommes limités:

@mixin media($minmax, $media) {
  @each $size, $resolution in $sizes {
    @if $media == $size {
      @media only screen and (#{$minmax}-width: $resolution) {
        @content;
      }
    }
  }
}

Bref, on passe le nom de la résolution d'écran dont on a besoin, on cherche sa valeur parmi celle précédemment déclarée dans la variable $ tailles. Après l'avoir trouvé, nous le substituons avec le min ou max passé (variable $ minmax).



Un exemple d'utilisation, y compris dans un autre mixin:

@mixin blocks-width {
  width: 400px;
  @include media("max", "md") {
    width: 100%;
  }
}

À partir de cet exemple simple, nous obtiendrons un mixin qui change la largeur du bloc à <768px de 400px à 100%. Les exemples suivants devraient donner le même résultat.



Un exemple d'utilisation à l'intérieur d'une classe:

.blocks-width {
width: 400px;
  @include media("max", "md") {
    width: 100%;
  }
}

Un exemple d'utilisation en tant que requête multimédia autonome:

.blocks-width {
width: 400px;
}

@include media("max", "md") {
.blocks-width {
    width: 100%;
}
}

Mais que se passe-t-il si vous avez besoin d'une requête multimédia, y compris une avec une plage claire (spécifiez une résolution dans laquelle la requête multimédia fonctionnera)? Développons un peu notre mixin.



Personnellement, il est pratique pour moi de décrire la résolution comme suit - si nous avons besoin de la plage md, nous prenons les tailles d'écran entre sm et md. Si nous voulons réécrire le mixin pour ne passer qu'une seule résolution, alors nous devrons trouver la valeur précédente dans la liste. Comme je n'ai trouvé aucune méthode pour faire cela rapidement, j'ai dû écrire une fonction:

@function getPreviousSize($currentSize) {
  $keys: map-keys($sizes);
  $index: index($keys, $currentSize)-1;
  $value: map-values($sizes);
  @return nth($value, $index);
}

Pour vérifier son fonctionnement, utilisez déboguer:

@debug getPreviousSize('md');

Ensuite, notre code légèrement refait:

@mixin media($minmax, $media) {
  @each $size, $resolution in $sizes {
    @if $media == $size {
      @if ($minmax != "within") {
        @media only screen and (#{$minmax}-width: $resolution) {
          @content;
        }
      } @else {
        @if (index(map-keys($sizes), $media) > 1) {
          @media only screen and (min-width: getPreviousSize($media)+1) and (max-width: $resolution) {
            @content;
          }
        } @else {
          @media only screen and (max-width: $resolution) {
            @content;
          }
        }
      }
    }
  }
}

La logique est la même que pour la fonctionnalité précédente. Mais, si vous souhaitez appliquer une requête multimédia uniquement dans une plage, par exemple, md, lors de l'appel du mixin, écrivez ce qui suit:

@include media("within", "md") {
  .blocks-width {
    width: 100%;
  }
}

Après cela, nous verrons le css compilé suivant:

@media only screen and (max-width: 768px) and (min-width: 577px)
.blocks-width {
    width: 100%;
}

De plus, si nous indiquons la plus petite taille d'écran (nous l'avons xs), par exemple:

@include media("within", "xs") {
  .blocks-width {
    width: 100%;
  }
}

Ensuite, nous obtenons une plage de 0 à la plus petite résolution correspondante:

@media only screen and (max-width: 320px)
.blocks-widthh {
    width: 100%;
}

Naturellement, vous pouvez réécrire ces requêtes multimédias dans l'autre sens, mais personnellement, je suis habitué à la mise en page du plus grand au plus petit.



Merci de votre attention!

UPD: le mixin a été légèrement corrigé pour que les résolutions dans des plages limitées ne se chevauchent pas :) Merci de votre attentionE_STRICT