Forwarded from Будни разработчика
#ссылка дня
#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/
#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/
CSS-Tricks
Working with JavaScript Media Queries | CSS-Tricks
What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this: