Текстовое содержание видео:

Что такое медиа-запросы в CSS и для чего они нужны?

Первым делом давайте разберемся с самым главным словом в этом определении - словом "медиа". 

Что же такое "медиа"?

Если обратиться к словарю, то мы с вами увидим, что медиа - это средства и способы передачи информации. 

Если рассмотреть это определение применительно к вебу, т.е. к той части Интернета, которая отвечает за веб-страницы, то медиа - это то устройство, которое выводит нам тот или иной сайт на дисплей.

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

Все эти способы, с помощью которых мы можем просмотреть ту или иную страницу, мы можем отнести к так называемым "медиа".

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

Например, если мы просматриваем веб-сайт через мобильный телефон, то этот сайт не должен быть слишком мелкий. 

Его границы не должны выходить за пределы области просмотра. 

Также сайт должен так адаптироваться под мобильные устройства, чтобы текст был крупный, удобочитаемый. Было удобное меню, на которое можно было бы нажимать. Картинки были бы обтекаемые. Контент располагается ровно во столько колонок, чтобы это удобно отображалось на мобильном устройстве.

Как же решить эту проблему, чтобы контент веб-страницы подстраивался под то устройство, на котором он отображается. 

Самый главный инструмент для решения этой проблемы - медиа-запросы.

Наверняка, вы уже не раз могли встречать эти самые медиа-запросы, когда просматривали исходный код каких-то html или css документов. 

Это конструкции в виде:

@media …

И далее указываются какие-то данные. 

По сути, медиа-запросы - это просто некие логические конструкции, которые позволяют нам применять какой-то набор стилей оформления CSS, конкретно к какому-то определенному устройству. 

С помощью медиа-запросов, мы с вами можем браузеру сказать следующее:

если сайт открывается на мобильных устройствах, нужно отобразить "эти" стили CSS;

если сайт открывается на планшете, то нужно применить "эти" стили оформления;

если сайт открывается на десктопном персональном компьютере, то нужно применить еще какие-то иные стили оформления.

Эту логику "ИСТИНА-ЛОЖЬ" позволяют реализовывать медиа-запросы.

Подводя итог:

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

Конечно, для того, чтобы сделать перенос так называемых плавающих блоков, которые перескакиваю друг под друга на разных устройствах, применение медиа-запросов не всегда оправдано.

Но, есть такие задачи, которые без применения медиа-запросов решить вообще не реально.

Медиа запросы - это основной инструмент для создания адаптивных сайтов. 

Используйте это на практике и делайте ваши сайты максимально удобными для пользователей.

Друзья, тема медиа-запросов очень важна для всех, кто занимается вопросами верстки веб-страниц. Представить себе современную верстку без медиа-запросов очень сложно.

Давайте будем постепенно осваивать эту тему и я постараюсь Вам в этом помочь. Для начала, давайте немного познакомимся и определимся с основными задачами.

Напишите в комментариях:

1) Для решения каких задач вы планируете использовать медиа-запросы в своей работе?

2) Если изучали работу с медиа-запросами раньше, с какими трудностями сталкивались? Что мешало освоить эту тему?

3) Есть какие-нибудь ожидания от этого курса? Что бы хотелось в нем увидеть?