Что такое медиа запросы css. Примеры с медиа запросами. Логические операторы, применяемые в медиа-запросах

В каких браузерах работает?

Для чего используется?

Как уже известно из спецификации CSS, особый стиль оформления можно создавать для отдельного типа устройства. С выходом спецификаций версии CSS3 стало возможно еще корректировать оформление в зависимости от технических возможностей этих самых устройств. В качестве примера, можно вычислить девайс, у которого максимальное разрешение экрана 640 пикселей и составить для него отдельную таблицу стилей, а для прочих устройств можно с генерировать свое оформление. Кроме этого с легкостью можно определять такие показатели, как монохромность экрана, ориентации страниц при выводе и прочие полезные характеристики. Также стоит отметить, что все эти параметры можно кооперировать. Таким образом мы можем определить уникальный стиль для устройства, у которого определенное разрешение и ориентация страниц.

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

Как правильно задавать?

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

Носитель	Пояснение
all	Соответствует всем возможным носителям. Это значения установлено по умолчанию
braille	Носитель, который работает по принципу Брайля. Такие устройства предназначены для людей, которые не видят.
embossed	Принтеры, которые осуществляют печать информации по принципу Брайля (предназначено для людей с ограниченным зрением).
handheld	Соответствует КПК и похожим устройствам.
print	Печатающие устройства.
projection	Проектор.
screen	Монитор.
speech	Устройство, которое считывает информацию и преобразует ее в голосовой формат. В качестве примера выступает речевой браузер.
tty	Устройства, у которых прописан стандартный размер символов и дисплеев (к примеру, телетайп).
tv	Телевизор.

Логические операторы с примерами использования в коде

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

@ media all and (color) { ... }

Частица, которая противоречит определенному условию или событию. В нижнем примере записан запрос на применение стиля ко всем существующим девайсам за исключением смартфонов

@ media all and (not handheld) { ... }

Стоит отметить, что данный оператор имеет не высокий приоритет считывания, поэтому он принимается во внимание системой в последний момент.

Применение этого оператора рассчитано на оптимизацию работы устаревших браузеров, которые могут не поддерживать медиа-запросы

@ media only all and (not handheld) { ... }

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

@ media all and (orientation: landscape) , all and (min- width: 480px) { ... }

Представленный пример определяет оформление для устройств с альбомной ориентацией страниц или для тех аппаратов, у которых минимальная ширина экрана 480 пикселей.

Медиа-функции

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

Основываясь на практическом опыте можно сказать, что подавляющее большинство функций работают по принципам массивов с указанными пределами. То есть условие будет находиться на минимальном или максимальном значении определенного параметра. Для этого используются приставки min- и max- .

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Устанавливает приемлемое соотношение показателя высоты и ширины активной области устройства, где будет производится вывод содержимого веб-документа. Эта функция справедлива для таких носителей, как смартфон, принтер, проектор, экран и телевизор. Значение записываются в числовом формате. Разделителем между высотой и шириной служит обычный слеш (/).

color (min-color, max-color)

Эта функция подключает стилевое оформление в соответствии с цветовыми возможностями устройства, а именно количество бит на канал основного цвета. Для того, чтобы картина прояснилась, предлагаю рассмотреть простой пример. Предположим, что установленное значение наименьшей возможной цветовой гаммы является число 3. Это говорит о том, что устройство должно поддерживать 23 оттенков каждого из основного цвета. Просчитав все возможные комбинации цветов получим, что при таком значении, чтобы оформление применялось, нужно, чтобы устройство поддерживало как минимум 512 цветов. Ниже смотрим пример

@ media screen and (min- color: 3 ) { /* Минимум 512 цветов */ body { background: #ccc; } }

color-index (min-color-index, max-color-index)

Эта функция имеет сходство с предыдущей по принципу работы, но определяет она слегка другой параметр. Цель проверки - определить количество цветов, которое может воспроизвести устройство. Значением опять же выступает число, только теперь никаких вычислений - указываем сразу необходимый параметр. Такая функция часто используется для определения параметров смартфонов, принтеров, экранов и телевизионных устройств.

@ media all and (min- color- index: 256 ) { ... }

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Данная функция создана для определения соотношения экрана устройства, для которого составлялось оформление. Для этого достаточно указать два числа, которые соответствуют высоте и ширине экрана. Эти два значения должны разделятся между собой слешем (/). Ниже показан пример для девайсов с соотношением 16:9 и более

@ media screen and (min- device- aspect- ratio: 16 / 9 ) { ... }

device-height (min-device-height, max-device-height)

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

device-width (min-device-width, max-device-width)

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

< html> < head> < meta charset= "utf-8" > < title> device- width < style> div { padding: 10px; background: #e8bfad; margin: auto; } @ media screen and (min- device- width: 1600px) { div { width: 1500px; } } @ media screen and (device- width: 1280px) { div { width: 1100px; } } @ media screen and (device- width: 1024px) { div { width: 980px; } } < body> < div> Очень интересная информация для примера бла бла бла и тому подобное.

Сообщает системе, что данное устройство вывода распознает только один шрифт, не используя при этом параметры его высоты и интервалов между строк и букв. Такие устройства в наше время уже редкость, но иногда все-таки попадаются. К примеру, банковские терминалы. Для таких устройств характерно использование единиц em (если все таки пришлось прибегнуть к форматированию), как показано в примере

< html> < head> < meta charset= "utf-8" > < title> grid < style> @ media handheld and (grid) and (max- width: 15em) { body { font- size: 2em; } } < body> < p> Текст, который будет считываться с допотопного устройства.

height (min-height, max-height)

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

monochrome (min-monochrome, max-monochrome)

Определяет показатель монохромности устройства. Это позволяет для черно-белого дисплея составить более простое в цветовом плане оформление. В качестве значения функции выступают обычные числа, которые сообщают нагрузку бит на 1 пиксель. Чтобы было более понятно, при укаании числа 8 будет осуществляться поиск устройства, которое сможет распозновать 256 оттенков необходимого цвета. К примеру,

@ media print and (monochrome) { body { font- family: Times, "Times New Roman" , serif; } h1, h2, p { color: black; } } @ media print and (color) { body { font- family: Arial, Verdana, sans- serif; } h1, h2, p { color: #556b2f; } }

orientation

Функция распознает ориентации страниц в устройстве. Существует две достаточно распространенные ориентации: альбомная и книжная. В первом случае у страницы ширина будет превышать показатель высоты, а во втором - с точностью до наоборот. Ниже представлен пример, в котором фоновое изображение меняется в зависимости от установленной ориентации устройства

@ media screen and (orientation: landscape) { #logo { background: url(logo1.png) no-repeat; } } @ media screen and (orientation: portrait) { #logo { background: url(logo2.png) no-repeat; } }

resolution (min-resolution, max-resolution)

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

@ media print and (min- resolution: 300dpi) { ... }

Этпа функция предназначена только для работы с телевизорами. Таким образом можно определить способ считывания информации данным устройством. Вообще, существует 2 способа:

1. Первый метод называется череcстрочный (interlace ) - упрощенный способ считывания информации по которому сначала выводятся четные строчки кадра, а затем не четные.
2. Прогрессивный (progressive ) метод работает по сложному и выводит полную информацию и сразу.

width (min-width, max-width)

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

< html> < head> < meta charset= "utf-8" > < title> Ширина страницы < style> body { background: #eee; } @ media screen and (max- width: 980px) { body { background: #fc0; } } < body> < p> Текст, который не имеет никакого смысла и написан для примера. Такие тексты называют рыбными.

В предыдущей статье я рассказал о том, и для чего она нужна. И там я сказал, что основной механизм адаптивной вёрстки - это медиа-запросы . Вот о медиа-запросах в CSS мы и поговорим в этот раз.

Давайте сразу разберём пример медиа-запроса :

body {
font-size: 9pt;
}
}

Данный код означает следующее: "Если ширина окна браузера 768px, то применить стили, указанные в фигурных скобках ". Чтобы лучше понять, как это работает, напишите вот такой код:

Откройте этот код в браузере и обратите внимание на размер текста. Теперь начните уменьшать ширину окна браузера, и когда она достигнет 768px , то текст заметно уменьшится. Вот это и есть адаптивная вёрстка и работа медиа-запросов в CSS .

Безусловно, таких медиа-запросов может быть очень много, а внутри них может быть далеко не один селектор body , а сколько угодно самых разных селекторов.

Так же есть и другие параметры, такие как min-width , который будет срабатывать при указанной ширине и больше. Аналогичные параметры max-height и min-height , отвечающие за высоту. Так же можно комбинировать разные параметры через and :

@media screen and (max-width: 768px) and (max-height: 300px) {
body {
font-size: 9pt;
}
}

В данном случае стили будут подключаться только при ширине меньше, либо равной 768px и при высоте меньше, либо равной 300px .

Что касается практики, то могу смело сказать, что в 95% случаях используется лишь один max-width . Иногда ещё и min-width . И ещё раз повторяю, что есть и другие медиа-запросы в CSS , но забивать ими Вашу голову не буду. Но если очень хочется, то их можно посмотреть в справочнике.

Итак, в этом материале мы затронем весьма интересную тему создания адаптивных HTML страниц путём использования CSS медиа запросов.

Что вообще такое эти медиа запросы CSS? Эти самые запросы представляют собой обрамлённые коды в определённом синтаксисе, которые применяются только если экран пользователя соответствует условию запроса.

Вот пример запроса:

@media screen and (max-width: 600px) {
body {
background: #ccc;
}
/*Ваш код CSS*/
}

Из премера ясно что код будет применяться если экран видимая область для сайта (viewport) конечного пользователя меньше или равен 600 пикселям по ширине.

Внутри такого запроса может быть сколько угодно элементов к которым применяется сколько угодно свойств и все они будут задействованы только когда выполняется условие медиа запроса. Эта система напоминает своим принципом стандартный оператор if(){}, который имеется у большинства языков программирования. Как и в случае с if, медиа запросы могут иметь сразу несколько условий для выполнения вложенного CSS кода. Например:

@media screen and (min-width: 600px) and (max-width: 1000px) {
body {
background: #ccc;
}
/*Ваш код CSS*/
}

Сразу видно что выполняться будет если ширина вьюпорта от 600 до 1000 пикселей.

Как вы уже понились зам запрос строиться так:

@media screen and (УСЛОВИЕ){
/*Код*/
}

Вы наверное обратили внимание на слово screen. Это значит что-то вроде типа устройства куда идёт вывод. Ещё, кроме screen есть: all, projection, tv, print, 3d-glasses. Для мониторов, мобилок это screen , поэтому с ним у нас и все примеры. Вообще вместо него лучше ставить all (для всего), если вы не уверены с какого вентилятора пользователь откроет ваше приложение или игру или что там у вас.

Писать запросы вы можете как в css файлах, так и в самих HTML страницах. Более того вы можете в HTML вы можете создать медиа запросом условие при котором будет подключен файл:

Это файл который подключиться если плотность пикселей составит 2. Применяется в основном для идентификации четвёртого айфона.

Таким самым образом можно отдельно написать CSS файлы для портретной или ландшафтной ориентации:

Это применяется многими веб-девелоперами.

С этим разобрались. Давайте теперь посмотрим какие запросы вообще могут применяться и работать в современных браузерах.

CSS Медиа запросы

Теперь мы посмотрим какие медиа запросы CSS ипользуются чаще всего и возможно вам пригодятся.

Список свойств будет написан с выдуманными параметрами чтобы вы понимали какие значения может содержать то или иное свойство:

min-width:100px - Минимальная ширина окна
max-width:35em - Максимальная ширина окна
max-device-width: 480px - Максимальная ширина устройства (в пикселях)
device-width: 768px - Ширина устройства
device-aspect-ratio: 9/16 - Соотношение сторон
orientation:landscape - Ландшафтная ориентация
orientation:portrait - Портретная ориентация
resolution: 96dpi - Плотность экрана
min-resolution: 192dpi - Минимальная плотность экрана
-webkit-device-pixel-ratio: .75 - Коэффициент плотности экрана (в примере значение 0.75)
-webkit-min-device-pixel-ratio: 1.3 Минимальный коэффициент плотности экрана

О последних параметрах хочется немного поговорить. Добавлю что resolution нестабильно работает. Некоторые устройства не принимают должным образом запрос. А вот -webkit-device-pixel-ratio это собственно условный коэффициент плотности экрана 0.75 это экран с низкой плотностью пикселей, а 2 это Retina.

P.S. Если вы хотите быстро проверить какие CSS запросы работают с вашим устройством и что они собственно отдают, тогда посетите эту страницу вашим устройством.

Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.

Реализация

Начнем с того, что семантическая разметка содержания упрощает перекомпоновку страниц в случае необходимости. С помощью таблицы стилей мы создали резиновый макет . Это первый шаг на пути к достижению нашей цели. Вместо атрибута width для контейнеров мы стали указывать max-width . Атрибут height был заменен атрибутом min-height , чтобы крупный шрифт или многострочный текст не нарушал границы контейнера. Чтобы картинки с фиксированной шириной не ломали резиновые столбцы, применяется следующее правило CSS:

Img { max-width: 100%; }
Резиновый макет – хорошая идея, но использование такой компоновки накладывает некоторые ограничения. К счастью, медиа-запросы теперь поддерживаются всеми современными браузерами , в том числе IE9+ и браузерами основной части мобильных устройств. Это позволяет создавать сайты, качество отображения которых в мобильных браузерах не снижается, поскольку они оптимизируются под тот или иной интерфейс. Но сначала необходимо определить, какие особенности смартфонов должны учитываться веб-серверами.

Области просмотра

Когда пиксель не является пикселем? В том случае, если речь идет о смартфоне. Обычно браузеры смартфонов имитируют браузеры настольных компьютеров с высоким разрешением, поэтому страницы отображаются в них, как на экране монитора. Вот почему появился «режим обзора» с мелким текстом, который невозможно прочитать без увеличения. Ширина области просмотра по умолчанию в стандартных браузерах Android составляет 800 пикселей, а в браузерах iOS – 980 пикселей, независимо от фактического количества физических пикселей на экране.

Чтобы переключить браузер в более удобный для чтения режим, необходимо использовать метаэлемент viewport:

Существует множество вариантов разрешения экранов мобильных устройств, но стандартное значение device-width, сообщаемое браузерами, обычно составляет около 320 пикселей. Если ширина экрана вашего мобильного устройства равна 640 физическим пикселям, изображение шириной 320 пикселей будет масштабировано на всю ширину экрана, и в обработке будет использоваться в два раза больше пикселей. Таким образом, вдвое большая плотность пикселей обеспечивает более четкое отображение на небольшом экране по сравнению с экраном настольного компьютера.

Важно, что если в качестве значения элемента width в метатеге viewport указывается device-width, это значение обновляется, если пользователь меняет ориентацию экрана смартфона или планшета. В сочетании с медиа-запросами эта функция позволяет изменять макет страницы при повороте устройства:

@media screen and (min-width:480px) and (max-width:800px) { /* Target landscape smartphones, portrait tablets, narrow desktops */ } @media screen and (max-width:479px) { /* Target portrait smartphones */ }
В зависимости от того, как функционирует и выглядит ваш сайт на экранах различных устройств, может потребоваться использовать разные контрольные точки. Вы можете также использовать медиа-запрос для выбора определенной ориентации без учета соотношения размеров в пикселях, если эта функция поддерживается .

@media all and (orientation: landscape) { /* Target device in landscape mode */ } @media all and (orientation: portrait) { /* Target device in portrait mode */ }

Изменяется расположение контента и масштаб изображений –

Пример использования медиа-запросов

Недавно мы запустили новую версию страницы О Google . Чтобы пользователям устройств с небольшими экранами, такими как планшеты и смартфоны, было удобнее работать с этой страницей, кроме резинового макета мы добавили в ее код несколько медиа-запросов.

Вместо того чтобы нацеливаться на конкретные разрешения экранов, мы задали относительно широкий набор контрольных точек. Если разрешение экрана составляет более 1024 пикселей, страница отображается в своем первоначальном виде на сетке из 12 столбцов. Если оно составляет от 801 до 1024 пикселей, благодаря резиновому макету отображается слегка сжатая версия страницы.

Только при разрешении экрана менее 800 пикселей неосновной контент будет отображаться в нижней части страницы:

@media screen and (max-width: 800px) { /* specific CSS */ }
Последний медиа-запрос предназначен для смартфонов:

@media screen and (max-width: 479px) { /* specific CSS */ }
С этого момента прекращается загрузка больших изображений; блоки контента размещаются один над другим. Мы также добавили дополнительные пробелы между элементами контента, чтобы более четко разграничить разделы.

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

Изменяется расположение контента, удалено большое изображение – О Google

Заключение

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

И сегодня пора поговорить о таком понятии, как media queries. Что это такое и где его применять мы и разберем в сегодняшнем занятии. Для понятия того, чем же таким важным есть media queries в адаптивной верстке, нам нужно вернуться в CSS2 и посмотреть на правило, которое называлось @media.

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

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

@media screen { /* Стиль для отображения в браузере */ body { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */ font-size: 0.9em; /* Размер шрифта */ color: #000080; /* Цвет текста */ } h1 { background: #faf0e6; /* Цвет фона под текстом */ border: 2px dashed #800000; /* Рамка вокруг заголовка */ color: #a0522d; /* Цвет текста */ padding: 7px; /* Поля вокруг текста */ } } @media print { /* Стиль для печати */ body { font-family: Times, "Times New Roman", serif; /* Шрифт с засечками */ } h1, h2, p { color: #000; /* Черный цвет текста */ } }

Как видно с примера выше первая часть стиля задана для обычного браузера указанием типа screen , а вторая часть для вывода на печать и здесь стоит уже тип print . Вы также заметили, что в таблице есть тип handheld , который подходит под мобильные устройства, ну или должен подходить?! А дело в том, что этот тип он не совершенен и не охватывает всевозможные устройства в современном мире. Вот по этой простой причине и были изменены медиа запросы в css3 и сейчас они уже немного по другому работают и задают тип, но все по порядку.

Еще немаловажным есть фактор подключения стилей к самой странице, а их можно подключить вот таким способом:

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

Делается это следующим образом в одном документе создаются разные стили под различные разрешения экранов и каждый тип записывается после предыдущего типа стилей, на примере это выглядит вот так:

/* for 480px or less */ @media screen and (max-width: 480px) { .parkNews li { display:block; width:auto; padding-right:0 !important; padding-bottom:20px; } h1 { text-align:center; font-size:2.42857em; } } /* for 768px or less */ @media screen and (max-width: 768px) { .birchNews { float:none; width:auto; } .ourPark { margin-left:0; } .mainContent { float:none; width:auto; } }

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

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

@media screen and (max-width: 321px){ }

Здесь указан логический оператор и, первая часть говорит все экраны, мониторы и устройства с шириной не более 321px будут выполнять следующие правила, ну и записываем то, что нам нужно для этого типа устройств. Для полноценного ознакомления с всеми возможностями медиа запросов рекомендую перейти на сайт w3.org/TR/css3-mediaqueries и посмотреть более детально все, что там расписано по этому поводу.

Существует четыре логических оператора записи:

• and — логический оператор и ;
• , — логический оператор или ;
• not — логический оператор нет ;
• only — логический оператор только .

Приступая к практике верстки при помощи медиа запросов

С теоретической стороной немного поработали, пора приступить к практической, давайте используем нашу заготовку с предыдущего занятия, где есть уже сетка прописанная в стилях и создадим простой каркас в html для практики, у меня это выглядит вот так:

Я создал заголовок первого уровня обернув его в колонку со 100% шириной, потом создал три блока, которые в свою очередь с заданной шириной при помощи класса.col-4 и получилось, то что вы видите в примере.

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

@media screen and (max-width: 320px) { h1{ color: aqua; } .container .cols.col-1, .container .cols.col-2, .container .cols.col-3, .container .cols.col-4, .container .cols.col-5, .container .cols.col-6, .container .cols.col-7, .container .cols.col-8, .container .cols.col-9, .container .cols.col-10, .container .cols.col-11, .container .cols.col-12 {width: 100%;} }

Что я здесь записал, давайте разберем все поподробнее, итак самая первая строка @media screen and (max-width: 320px) — здесь говорится, что для всех экранов и размеров не выше 320px будут применены следующие стили. В самих же стилях для разнообразия сменил цвет заголовка и самое главное всем нашим столбцам задал 100% ширину, теперь не важно какой класс задан тому или иному блоку, он будет иметь 100% ширину.

Давайте сохраним наши стили и откроем получившийся результат в окне браузера сузив его до размеров мобильного устройства и вот, что получится:Никакой горизонтальной прокрутки, блок за блоком разве не красота? Вот такими простыми манипуляциями с медиа запросами мы добились успеха для отображения в размере мобильных устройств.

По традиции весь готовый исходный код под этой картинкой)))

Это еще не все возможности применения и использования медиа запросов в css3, ведь можно даже при помощи after добавлять или удалять контент, блоки для их отображения или сокрытия в различных расширениях браузеров и мониторов, но об этом мы поговорим как нибудь в другом занятии. На этом наше практическое занятие по медиа запросам подошло к концу, спасибо за просмотр и всего хорошего!