Будни разработчика
14.7K subscribers
1.17K photos
334 videos
7 files
2.01K links
Блог Lead JS-разработчика из Хельсинки
Автор: @bekharsky

По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv

Чат: https://t.me/htmlshitchat

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
Download Telegram
#статья дня
#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/
#ссылка дня

Казалось бы, что может быть проще 100%? Но это не совсем так.

От чего рассчитываются 100%? Как говорят англоязычные, it depends. По-русски – “зависит от”. Косноязычно как-то, но уж как есть.

В общем, держите прекрасный интерактивный пост от Амелии Ваттенбергер: https://wattenberger.com/blog/css-percents

Красиво, удобно, понятно.

#css #percent #width #height #position
#статья дня

Казалось бы, что может быть проще 100%? Но это не совсем так.

От чего рассчитываются 100%? Как говорят англоязычные, it depends. По-русски – “зависит от”. Косноязычно как-то, но уж как есть.

В общем, держите прекрасный интерактивный пост от Амелии Ваттенбергер: https://wattenberger.com/blog/css-percents

Красиво, удобно, понятно.

#css #percent #width #height #position #бородач
👍13🤩2