#статья дня
#css #js #mediaqueries #width #adaptive

Мы говорим “медиа-запросы” или “media queries” и обычно подразумеваем только часть с CSS. А когда дело касается JavaScript, во многих примерах, курсах и учебниках до сих пор используется сравнение window.innerWidth с желаемым значением на каждое событие изменения размера окна.

Конечно же, это неправильно и устарело. Уже давно существуют медиа-запросы для скриптов:

mediaQuery = window.matchMedia('(min-width: 768px)')

if (mediaQuery.matches) {
alert('Media Query Matched!')
}

Самое прекрасное в этом, что не надо слушать событие изменения размера окна. Достаточно лишь срабатывания самого медиа-запроса!

mediaQuery.addEventListener(function(e) {
if (e.matches) {
// your code
}
});

Подробнее и сравнение разных подходов в статье от Марко Илик (Marco Ilic) на CSS-Tricks: https://css-tricks.com/working-with-javascript-media-queries/

#ссылка дня

https://mediaqueri.es/

Честно говоря, довольно неожиданный проект. Это каталог внешнего вида адаптива различных сайтов, их там огромное количество.

Кому может пригодиться? Ну, пожалуй, дизайнерам в первую очередь, которым нужно прикинуть, как же адаптировать сайт под мобильные устройства. Ну или наоборот, если mobile first.

Ну и, конечно, верстальщикам. Ведь даже в 2021 году макет могут дать без адаптива (беги, я бы сказал). Ну или дать совет заказчику и/или дизайнеру.

#html #mediaqueries

#фишка дня

Нормальные «математические» или «операторные» медиазапросы скоро будут доступны не только в Firefox, как я писал в одном из постов, но и в Chrome 104: https://developer.chrome.com/blog/media-query-range-syntax/

Короче говоря, вместо такой вот ерунды:

@media (min-width: 400px) and (max-width: 600px) {
// Styles for viewports between 400px and 600px.
}

Будем писать такую:

@media (400px <= width <= 600px) {
// Styles for viewports between 400px and 600px.
}

Мне нравится больше. Кому ещё — глядите на плагин для PostCSS: https://github.com/postcss/postcss-media-minmax

#css #math #mediaqueries