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

Разрешение экрана в зависимости от используемого устройства может колеблиться от 320px до 2560px. Для того что бы наш сайт корректно отображался на любых устройствах, необходимо делать адаптацию. Проще всего это делать с помощью медиазапросов. Медиазапросы позволяют задавать стили объектов в зависимости от характеристик устройства (например ширина экрана).

Если не работают медиазапросы

В тег head добавляем строчку

Синтаксис:

• @media - оператор объявления правила медиазапроса
• screen - тип носителя (экран)
• max-width: 768px - проверяемая характеристика носителя. Т.е. когда ширина экрана не будет превышать 768 пикселей.

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

Рассмотрим следующий пример

Код html

СТР 9-20 - на этом участке мы распологаем тег header (шапка сайта) в него мы помещаем тег nav. (навигация) в котором расположится наше меню. Меню будет состоять из списка с тремя строками (Home, About и Contacts). После тега nav мы помещаем поле input с типом search (строка поиска). nav и input помещаем в общий блок div.

СТР 22-43 далее мы указываем тег main (основное содержимое сайта). В этот раздел мы помещаем тег section внутри которого находится тег article (тоесть внутри секции блок со статьей, в нашем случае это пространство будет заполнено картинками)

После section мы помещаем тег aside (боковая панель нашего сайта) в боковой панели мы размоложим три ссылки с нашей навигацией и параграф с текстом

Теперь приступим к стилизации нашего сайта

рассмотрим следующий код:

блок body

• padding: 0; - отступ с внутренней стороны 0 пикселей
• margin: 0; - отступ с внешней стороны 0 пикселей

блок header

• width: 100%; - ширина шапки 100%
• background: lightblue; - цвет фона - lightblue

блок header li - всем объектам li которые находятся в теге header

• display: inline-block; - строки списка становятся блоками и выравниваются в линию
• margin-left: 15px; - отступ с лева у каждой строки 15 пикселей.

блок header a - всем объектам a которые находятся в теге header

• text-decoration: none; - убираем подчеркивание у ссылки

блок .header-wrap - стили будут применяться к блоку div в который заключены меню и поле поиска

• width: 960px%; - делаем ширину 960 пикселей. почему не указываем значение в %?. для того что бы наглядно показать как будут затем работать медиазапросы
• margin: 0 auto; - помещаем наш блок по середине
• display: flex; - все разделы (блоки) выравниваем по линии
• justify-content: space-between; - раставляем блоки внутри контейнера по краям

Блок input - здесь задаем два параметра определяющие внешний отступ нашего поля поиска

Блок main

• display: flex; - эти свойством мы указываем что все объекты заключенные в тег main станут блоками и выравнятся в линию
• width: 75%; - установили ширину 75%
• margin: 0 auto; - установили нулевой внешний отступ и указали что автоматически будет выполняться расчет, т.е. наш блок main выравнится по середине

Блок section и Блок aside - в этих блоках мы задаем ширину разделов section и aside в 70 и 30 процентов соответственно

Блок .post-item - здесь мы задаем стиль для всех блоков которые будут содержать картинки, которыми мы замостим раздел article

• display: inline-block; - все блоки выравниваются в линию
• width: 23%; - ширина каждого блока 23%. для чего это делается? для того что бы на экране вмещалось по 4 картинки в строке

Теперь в фалйе css создадим правило медиазапроса. Выглядить оно будет вот так:

рассмотрим что мы тут указали.

СТР 50-54 - здесь указано что до тех пор пока ширина окна не привысит 900 пискселей поле input отображаться не будет.

СТР 56-60 - здесь указано что до тех пор пока ширина окна не привысит 800 пискселей размер ширины блоков в которых размещена картинка будет составлять 30%

СТР 62-75 - здесь указано что до тех пор пока ширина окна не привысит 600 пискселей

• .post-item width: 40%; - размер ширины блоков в которых размещена картинка будет составлять 40%
• main flex-direction: column; - задаём направление основной оси в контейнере (вертикально). т.е. блоки в разделе main будут уже не в строку а в столбец
• section width: 90%; - ширина раздела section 90%
• aside width: 100%; - ширина раздела aside 100%

Результат