| Kosten | Среда, 15 Августа 2018, 14:40 | Сообщение 1 |
| Современный дизайн на сайте, где трудно представить, что в нем не применяется или используется очень много медиа запросов (Media Queries), которые как раз создают адаптивность для разных размеров экрана и монитора, для того, чтоб все корректно показывало. Можно сказать, что Media запрос отвечает как раз за ту функциональность, которая позволит пользователю или кто зашел на сайт, чтоб он все корректно по стилю видел, а точнее задаем определенные стили для этого.
Также можно позволить применять эти правила только в том случае, если текущая страница соответствует определенным условиям. В этом мануале рассмотрим, что можно при условиях одного скрипта в зависимости от значений Media, где создается отзывчивый дизайн, а точнее как правильно прописать Media запрос в JavaScript.
Главные основы Media Queries
Вероятно многим известны основы использования Media запроса в стилистике CSS. Где для начало нужно создать запрос, что важно, это нужно создавать на каждое правило, определенное в нем, применяется к странице только в том случае, в том случай, если все условия запросов действительны.
Код @media all and (max-width: 680px) {
body {
background: #35373a;
}
}
Безусловно это все хорошо, но большинство думает, что отличным способом было бы, если бы можно сразу запустить так, что на самом мелком экране можно было корректно просматривать, и аналогично, на самом широком мониторе. Вот для этого и нужна функция window.matchMedia - так как гона будет поддерживаться почти на всех браузерах, но кроме, как всегда Осла IE8 и ниже.
Код var mq = window.matchMedia('@media all and (max-width: 680px)');
if(mq.matches) {
// Задаем ширину для браузера больше чем 680px
} else {
// здесь ширина для браузера меньше чем 680px
}
Аналогично можем добавить функцию для поддержки событий (ивенты):
Код mq.addListener(function(changed) {
if(changed.matches) {
// на браузере ширина изменилась под разрешение большее чем 680px
} else {
// на браузере ширина изменилась под разрешение меньшее чем 680px
}
});
Использования медиа запросов в JavaScript приносит много преимуществ, и я хотел иметь это готовое к использованию в библиотеке. Здесь могли бы получить текущую ширину или высоту экрана с помощью обычного JavaScript.
| | Страна: (RU) |
| |
