Медиазапросы

Привет!

Недавно столкнулась с проблемой медиазапросов в проекте, собранном на Angular. Уже не помню, какие именно ограничения заставили меня написать миксин для упрощения своей работы, но поделиться результатом и получить фидбек очень хочется. Встречала много других подобных примеров, но для работы мне понятнее и удобнее использовать именно этот.

В общем, для удобства составила себе такие требования:

1. Размеры экранов должны быть вынесены отдельно, чтобы можно было глобально в одном месте поменять поведение (например, вместо 320px передавать просто xs).
2. Данный миксин с медиазапросами может быть не только в одну сторону (например, не всегда только max-width).
3. Миксин может использоваться и отдельно, переопределяя описанные классы внутри, или описываться в теле родителя, переопределяя его свойства.

Итак, определим любые нужные нам разрешения. Например:

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

Для начала, напишем миксин, который бы принимал нужный префикс диапазона и разрешение, под которое мы ограничиваемся:

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

Если кратко, то мы передаём нужное нам название разрешения экрана, ищем его значение среди объявленных ранее в переменной $sizes. После того, как нашли, подставляем его вместе с переданным min или max (переменная $minmax).

Пример использования, включая в другой миксин:

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

С этого простого примера мы получим миксин, меняющий ширину блока на разрешении <768px с 400px на 100%. Следующие примеры должны выдать такой же результат.

Пример использования внутри класса:

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

Пример использования в качестве отдельного медиазапроса:

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

А что, если нужен медиазапрос в том числе и с чётким диапазоном (указать одно разрешение, в пределах которого будет работать медиазапрос)? Расширим немного наш миксин.

Лично мне удобно описывать разрешение следующим образом если нам нужен диапазон md, то мы берём размеры экрана между sm и md. Если мы хотим переписать миксин таким образом, чтобы мы передавали только одно разрешение, то нам придётся найти предыдущее значение из списка. Так как я не нашла какого-то метода, чтобы это сделать быстро, то пришлось написать функцию:

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

Чтобы проверить, как она работает, используйте debug:

@debug getPreviousSize('md');

Далее, наш немного переделанный код:

@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)) and (max-width: $resolution) {            @content;          }        } @else {          @media only screen and (max-width: $resolution) {            @content;          }        }      }    }  }}

Логика такая же, что касается предыдущего функционала. Но, если хотите применить медиазапрос только в диапазоне, например, md, то при вызове миксина напишите следующее:

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

После чего мы увидим такой скомпилированный css:

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

При этом, если мы укажем самый маленький размер экрана (у нас это xs), например:

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

То получим диапазон от 0 до соответствующего наименьшего разрешения:

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

Естественно, вы можете переписать данные медиазапросы и в другую сторону, но лично я привыкла верстать от большего до меньшего.

Спасибо за внимание!