Что такое медиазапросы

Медиазапросы — это наборы правил, которые задают разные аспекты вёрстки в зависимости от размеров и свойств экрана браузера. Они появились в CSS3 в 2012 году, а сегодня их поддерживают все современные браузеры.

В медиазапросах прописывают условия, при соблюдении которых выполняются определённые требования к стилю. Например, нам нужно сделать так, чтобы на экранах шириной до 500 пикселей верхнее меню превращалось в три точки в углу, а на больших мониторах — растягивалось на всю ширину. Или чтобы в мобильной версии сайта шрифт становился чуть больше, а также менялись отступы и фон. Всё это можно сделать с помощью медиазапросов.

Если упростить, всё работает так:

1. Медиазапрос смотрит на условие, которое прописал разработчик, и проверяет, выполняется оно или нет. Например, ширина экрана меньше 500 пикселей.
2. Если условие выполняется — медиазапрос делает то, что написано внутри него: меняет шрифты, отступы и фон.
3. Если не выполняется — не происходит ничего. Но может сработать условие другого медиазапроса, и тогда сработает уже он.

Медиазапросов на странице может быть сколько угодно — главное, чтобы разработчик понимал, какой из них за что отвечает.

Как делаются медиазапросы и где применяются, читайте в нашей статье: https://v.thecode.media/bcqc3

Журнал «Код» ✔

Что такое медиазапросы

Медиазапросы — это наборы правил, которые задают разные аспекты вёрстки в зависимости от размеров и свойств экрана браузера. Они появились в CSS3 в 2012 году, а сегодня их поддерживают все современные браузеры.

В медиазапросах прописывают условия, при соблюдении которых выполняются определённые требования к стилю. Например, нам нужно сделать так, чтобы на экранах шириной до 500 пикселей верхнее меню превращалось в три точки в углу, а на больших мониторах — растягивалось на всю ширину. Или чтобы в мобильной версии сайта шрифт становился чуть больше, а также менялись отступы и фон. Всё это можно сделать с помощью медиазапросов.

Если упростить, всё работает так:

1. Медиазапрос смотрит на условие, которое прописал разработчик, и проверяет, выполняется оно или нет. Например, ширина экрана меньше 500 пикселей.
2. Если условие выполняется — медиазапрос делает то, что написано внутри него: меняет шрифты, отступы и фон.
3. Если не выполняется — не происходит ничего. Но может сработать условие другого медиазапроса, и тогда сработает уже он.

Медиазапросов на странице может быть сколько угодно — главное, чтобы разработчик понимал, какой из них за что отвечает.

Как делаются медиазапросы и где применяются, читайте в нашей статье: https://v.thecode.media/bcqc3

hottg.com/thecodemedia/9948

4.8K viewsMay 29 at 07:04