[CSS, HTML] Медиазапросы в SCSS — ещё один удобный способ использования @media screen

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
03-Авг-2020 20:30

Цитировать

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

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

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

$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%;
}

Естественно, вы можете переписать данные медиазапросы и в другую сторону, но лично я привыкла верстать от большего до меньшего.
Спасибо за внимание!
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_css, #_html, #_scss, #_mediazaprosy (медиазапросы), #_css, #_html

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 12:51
Часовой пояс: UTC + 5