Css — Media query CSS


Содержание

Полезные функции CSS Media Query

Типичный медиа-запрос состоит из медиа-типа (screen, print, speech и т.д.) и одного или нескольких выражений, включающих медиа-функции, которые могут принимать значения true или false.

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

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

Медиа особенности

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

Вот несколько полезных медиа-функций, с которыми я столкнулся:

1. Соотношение сторон

Соотношение сторон — это отношение ширины к высоте области просмотра.

Вот практический пример использования соотношения сторон —

2. Ориентация

Есть два значения ориентации:

  • portrait: область просмотра находится в книжной ориентации, то есть высота больше или равна ширине.
  • landscape: область просмотра находится в альбомной ориентации, то есть ширина больше, чем высота.

Эта медиа функция помогает в адаптивном дизайне. Мы можем использовать его с другими медиа функциями, такими как width и height.

3. Режим отображения (display-mode)

display-mode используется для проверки режима отображения приложения. Есть 4 типа в соответствии со спецификацией. Он является частью спецификации Web App Manifest.
Функциональный запрос будет применяться независимо от того, присутствует манифест веб-приложения или нет.

4. hover, any-hover and any-pointer

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

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

any-hover: проверяет, может ли любой доступный ввод зависать над элементами.

any-pointer: проверяет, есть ли у пользователя какое-либо указательное устройство (мышь, стилус), если да, то насколько оно точное
Точность определяется параметрами — fine, coarse, none

5. Width и Height

Это две часто используемые медиа-функции являются неотъемлемой частью отзывчивого Интернета.

6. prefers-color-scheme

Данная функция была введена в «media queries level 5» но еще не реализована браузерами.

Она используется для определения того, запросил ли пользователь в своей системе тему светлого или темного цвета.

Ознакомится с другими функциями, представленными в media queries level 5.

В этой статье мы рассмотрели несколько полезных медиа-функций. Есть и другие, такие как resolution, update и т.д. Полный список можно найти на MDN.

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

CSS3 продолжает одновременно восхищать и разочаровывать веб дизайнеров и разработчиков. Восхищают возможности, которые предоставляет CSS3, но разочаровывает практически полное отсутствие поддержки в Internet Explorer 8. В данной статье демонстрируется техника использования CSS3, которая не поддерживается в Internet Explorer 8. Однако, для тех, кому приходится обеспечивать поддержку мобильных устройств (например, iPhone или тех, которые используют Android) такой недостаток будет безразличен.

В данной статье объясняется, как с помощью нескольких правил CSS3 можно создать рабочую версию сайта для iPhone. Будет представлен очень простой пример, а также демонстрация того, как добавить стиль маленького экрана мобильного устройства к уже существующему сайту.

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

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

Медиа запросы в CSS3 подхватывают данную идею и развивают ее. Но в дополнение к определению типа устройства они позволяют получить сведения о его возможностях. Например:

  • ширина и высота окна просмотра
  • ориентация – например, мобильное устройство выводит информацию в альбомном или портретном режиме?
  • разрешение

Если у пользователя браузер, который поддерживает медиа запросы, то мы можем написать CSS специально для определенной ситуации. Например, определить, что пользователь использует маленькое устройство (например, смартфон) и выдать ему специфический шаблон страницы.Примером применения такой техники может служить сайт конференции dConstruct.

Веб сайт dConstruct 2010 в браузере Safari на экране компьютера.

Веб сайт dConstruct 2010 на экране iPhone

На выше приведенном примере видно, что сайт не просто уменьшается в размерах, а изменяется архитектура его контента, чтобы облегчить восприятие информации на маленьком экране мобильного устройства. Некоторые могут подумать, что просто используется шаблон iPhone, но это не так.. Такой же вид будет и в Opera Mini в телефоне с ОС Android. С помощью медиа запросов и определения возможностей устройства веб сайт dConstruct может обслуживать любой вид устройств, даже таких, о которых разработчики понятия не имели!

Использование медиа запросов для создания таблицы стилей для телефонов

Чтобы начать давайте рассмотрим очень простой пример. Шаблон, представленный ниже — очень простой и имеет всего две колонки.

Простой шаблон с двумя колонками.

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

Первый способ использования медиа запросов — создание альтернативной секции CSS прямо в той же таблице стилей. Так, чтобы определить целью маленькие устройства, можно использовать следующий синтаксис:

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

В приведенном коде используется альтернативное фоновое изображение и уменьшается высота и ширина заголовка, затем устанавливаются опции для контента и навигации float: none; и изменяется установка ширины, которая определялась ранее в таблице стилей. Данные правила действуют только для устройств с маленьким размером экрана.


Вид примера на экране iPhone.

Присоединение отдельной таблицы стилей с использованием медиа запросов

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

Присоединение таблицы стилей для мобильных устройств:

Testing media queries

Если вы являетесь владельцем iPhone, телефона с ОС Android или другого устройства, которое имеет браузер, поддерживающий медиа запросы, то можно проверить работу измененного CSS на них. Хотя потребуется загрузить код сайта, чтобы посмотреть на него. А как быть в том случае, если такого устройства нет или нужно провести проверку локально?

В процессе разработки вам может помочь отличный сайт ProtoFluid. Он предоставляет форму для ввода URL и просмотра дизайна, как он будет отображаться на экране iPhone, iPad или другого подобного устройства. Изображение ниже показывает вид сайта dConstruct, который представлен сервисом ProtoFluid для iPhone.

Сайт dConstruct, представленный сервисом ProtoFluid для вида на iPhone.

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

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

После обновления кода, просто перегрузите страницу и уменьшите размер окна, когда он достигнет 480 px, шаблон страницы измениться. Медиа запрос теперь реагирует, когда размер окна просмотра соответствует введенным вам значениям.

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

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

Настройка существующего сайта

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

Шаблон страниц

Рассматриваемый сайт использует шаблон фиксированной ширины с тремя колонками. Дизайн был разработан пару лет назад и медиа запросы тогда не принимались во внимание во время разработки.

Добавление нового файла стилей

Чтобы сделать линеаризацию сайта нужно провести много изменений, таким образом, нужно добавить новый файл с таблицей стилей после основного и с условием использования только при значении max-width меньше 480 px.

Для создания нового файла с таблицей стилей берем основной файл сайта и сохраняем его как small-device.css. Таким образом, он начинает жить как копия основного фала с таблицей стилей. Далее в нем надо переписать несколько правил и удалить все ненужное.

Сжатие заголовка

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

Линеаризуем шаблон

Далее нужно линеаризовать шаблон и сделать одну колонку. Шаблон создан с использованием плавающих блоков, поэтому надо найти все правила, которые делают колонки плавающими и установить для них свойства float: none и width:auto. Таким образом все колонки выстроятся одна под другой.

«Причесываем»

Теперь посмотрим на шаблон в ProtoFluid и точно настроим размеры полей и отступов для различных областей, которые будут отличаться от того, что установлено для обычного шаблона. С использованием Firebug для ProtoFluid такая работа выполняется быстро и легко, а получившийся набор правил CSS затем копируется в таблицу стилей.

Проверяем сайт в ProtoFluid.

Проверка сайта на iPhone

При проверке на iPhone выяснилось, что сайт не масштабируется в одну чудесную колонку. На сайте разработчиков Safari есть решение для такой проблемы — нужно добавить тег meta к заголовку сайта. в котором устанавливается ширина окна просмотра равной ширине дисплея устройства.

После добавления тега meta сайт стал выводиться как было задумано — в одну колонку:

Вид сайта на экране iPhone.

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

Заключение

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

Цукерберг рекомендует:  Обучение - Прямая трансляция

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

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

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

Когда использовать медиа-запросы?

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

  • Определение количества колонок. Трехколоночный макет сайта, который шикарно смотрится на настольных ПК, будет совсем неуместен для мобильных телефонов и планшетов. С помощью медиа-запросов можно переопределить количество колонок в макете с учетом ширины экрана устройства, сгруппировав для смартфонов весь контент в одну колонку.
  • Относительная ширина. Когда вы устанавливаете фиксированную ширину макета, скажем, в 960 пикселей, это подойдет для настольных компьютеров, лэптопов и некоторых особо крупных планшетов. Однако для мобильного телефона такой размер контейнера слишком большой. Используя медиа-запрос, можно специально для смартфонов создать «резиновый» макет, ширина которого будет не фиксированной, а относительной. Таким образом, контейнер шириной 100% будет легко подстраиваться под любой смартфон в любой ориентации.
  • Уменьшение отступов. Большие расстояния между блоками и элементами создают ощущение воздушного, легкого дизайна. Однако отступы, которые хорошо смотрятся на мониторе с диагональю 21-27 дюймов, будут выглядеть абсолютно безобразно на небольшом экране смартфона, к тому же принуждая пользователей больше прокручивать страницу. Медиа-запросы позволяют задать альтернативные размеры отступов для узких дисплеев.
  • Регулировка размера шрифта. Заголовки высотой в 60 пикселей могут красиво смотреться на десктопе, но для мобильных устройств такой размер шрифта редко когда уместен, поэтому для узких экранов будет целесообразным установить меньшее значение font-size.
  • Адаптивная навигация. Нередко бывает так, что навигационное меню, которое было продумано для десктопной версии сайта, совершенно не подходит для мобильных устройств ввиду своей объемности либо манеры расположения пунктов меню. Существует несколько подходов к реализации удобной навигации для мобильной версии сайта, и медиа-запросы непременно принимают в этом участие.
  • Скрытие элементов. Некоторые части веб-страницы могут быть бесполезными либо малозначимыми, если сайт просматривается с мобильного телефона. С помощью свойства display: none и медиа-запросов вы можете скрыть определенные элементы от глаз посетителя, если он зашел на сайт со смартфона. Но имейте в виду, что подобный прием не экономит трафик: скрытые элементы по-прежнему будут загружаться браузером.

Конечно, это далеко не все ситуации, когда применяются медиа-запросы.

Breakpoints (контрольные точки)

При помощи медиа-запросов вы можете создавать так называемые контрольные точки (англ. breakpoints) и привязывать к ним CSS-стили. К примеру, можно определить для браузера следующие правила: «Если ширина экрана составляет больше чем 767 пикселей, к веб-странице применяются эти стили, а если ширина экрана составляет больше чем 991 пиксель, применяются другие стили». Вот эти числа, обозначающие ширину экрана, и называются контрольными точками.

Какую ширину необходимо указывать в контрольных точках? Наиболее простой ответ: ту, на которой верстка веб-страницы начинает ломаться. Представим, что у вас есть сайт с контейнером шириной 1180 пикселей. Тогда в окне шириной 1200 пикселей (учитываем полосу прокрутки) или меньше он, скорее всего, будет выглядеть не очень хорошо. Вот и ваша первая контрольная точка: необходимо внести правки в дизайн, если сайт просматривается в окне шириной менее чем 1200 пикселей.

При создании гибких сеток часто применяется определенный набор медиа-запросов, предусмотренный для трех различных контрольных точек: смартфон, планшет, монитор ПК. Контрольных точек может быть и больше. Например, в Bootstrap 4 используется четыре контрольных точки в одном направлении и еще четыре — в обратном направлении:

Кроме этого, в Bootstrap задействуются еще несколько вариаций контрольных точек для записи стилей под конкретный диапазон ширины экранов. При этом используются сразу оба условия — для минимума и для максимума:

Mobile First или Desktop First?


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

  • Desktop First. При этом подходе вы сначала полностью верстаете дизайн для больших экранов, без использования медиа-запросов. После этого, используя контрольные точки в медиа-запросах, корректируете дизайн под средние и маленькие экраны (уменьшаете шрифт, перестраиваете макет, скрываете второстепенные элементы и т. п.). Преимущество такой верстки заключается в том, что старые браузеры (к примеру, Internet Explorer 8), которые не знают, что такое медиа-запросы, смогут отобразить ваш сайт, поскольку это исходный дизайн, который вы писали без использования директивы @media .
  • Mobile First. Если вы выбираете данный подход, то сначала верстаете дизайн для самых маленьких экранов, не используя медиа-запросы. После этого, создавая контрольные точки, вы корректируете верстку под все более и более широкие экраны.

Оба подхода подразумевают сначала создание определенного базового набора стилей, актуальных для любой версии сайта (например, цвет ссылок, размер основного шрифта и др.), а затем написание тех стилей, которые будут отличаться для различных экранов.

Синтаксис медиа-запросов

Чтобы добавить медиа-запрос в таблицу стилей, запишите следующее:

Внутрь скобок медиа-запроса поместите стили CSS, как вы делаете это обычно:

Желательно размещать все медиа-запросы под обычными стилями, а не над ними. Если вы используете контрольные точки, отталкиваясь от минимальной ширины экрана ( min-width ), размещайте их в порядке возрастания ширины экрана. Если вы применяете max-width , тогда расположите медиа-запросы в порядке уменьшения ширины. В противном случае одни медиа-запросы будут перезатирать предыдущие.

Далее в учебнике: принцип создания гибкой сетки в CSS.

Media queries CSS как АДАПТИРОВАТЬ сайт

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

CSS3 Медиа-запросы (Media queries CSS), позволяют реализовать как адаптивный веб-дизайн так и всякого рода оформление. В данном материале по свешенным Media queries мы реализуем пример как делаются адаптивные сайты.

See the Pen aVRZxO by Denis (@Dwstroy) on CodePen.

Из видео вы узнаете:

  • что такое Media queries и его составляющие элементы;
  • как формируется медиа запросы;
  • рассмотрим практически пример адаптивного дизайна сайта.

CSS3 медиа запросы или (media queries) – это определенный набор стилей и логических выражений, которые позволяют применять различные стили в зависимости от выполнения каких то дополнительных условий.

Используются для проверки ширины и высоты окна браузера, а также ширины и высоты экрана устройства, проверки его ориентации (альбомная или портретная) и многое другое.

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

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

Типы носителя

В се запросы начинаются с правила @madia , далее идет условие, в котором пишем тип носителя (screen) , он позволяет получить точную информацию, на каком устройстве открыта данная страница. Помимо этого типа имеются и другие носители как print , all и speech .

Типы носителей включают в себя

  • all – Подходит для всех видов устройств. Это значение используется по умолчанию.
  • print – Просмотр на экране страничек в режиме предварительного просмотра печати.
  • screen – Просмотр на экране цветных компьютерных мониторах.
  • speech — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

В CSS2.1 имелись несколько дополнительных типов, но они приняты устаревшими и в Media Queries 4 не задействованы.

Устаревшие типы носителей:

  • braille — Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
  • embossed — Принтеры, использующие для печати систему Брайля.
  • handheld — Смартфоны и аналогичные им аппараты.
  • projection – Проекторы.
  • tty — Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
  • tv – Телевизоры.

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


Логические операторы

З атем идут логические операторы, при помощи которых можно писать дополнительные условия, если это необходимо.

К примеру, and , эквивалентно «И» , и в этом случае если одно из условий будет не истиной значить и все выражение, является ложью.

Следующий оператор «запитая» , которая эквивалентна «ИЛИ» , и в данном случае если одно из условий верное, значит выражение является истиной.

Оператор not отрицание, а only позволяет скрыть стиль от всех браузерах, которые не поддерживают данное условие.

Логические операторы:

  • and – Связывает друг с другом разные условия (эквивалентно «и»);
  • not – Позволяет сработать медиа запросу в противоположном случае (эквивалентно «отрицание»);
  • only – Скрывает стили для браузера, которые не поддерживают данные условия;
  • , — Запятая работает по аналои с логическим оператором or (эквивалентно «или»);

Условие медиа запроса

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

Самые распространенные условия это максимальная и минимальная ширина max-width min-widt

Прописав ( max-width: 480px ), сам стиль в нутрии скобок будет применен в том случае, когда ширина экрана менее 480 пикселей.

Именно на таких примерах базируется адаптивная верстка, когда нам нужно применить стили под определенные расширения экраны мобильного устройства и все это делается через CSS (media queries).

  • width min-width max-width – ширина;
  • height min-height max-height – высота;
  • device-width min-device-width max-device-width – ширина на устройстве;
  • device-height min-device-height max-device-height orientation — высота на устройстве;
  • aspect-ratio min-aspect-ratio max-aspect-ratio – соотношение сторон;
  • device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio — соотношение сторон на устройстве;
  • resolution min-resolution max-resolution – разрешение экрана (количество пикселей);
  • color min-color max-color – количество бит на каждые из цветных компонентов устройства вывода;
  • color-index min-color-index max-color-index – количество записей в таблице подставноки цветов;
  • monochrome min-monochrome max-monochrome – количество битов на пиксель монохромного устройства;
  • scan grid – сетка сканирования;

Описываем основную структуру в HTML и CSS

Теперь рассмотрим, как это выглядит в действительности на примере создания простенького каркаса сайта.

Создаем пять блоков, шапка сайта header , верхнее меню top_menu , левый сайт бар sideLeft , область для контента content и подвал footer .

Затем определим для них стили

Для header назначим свой цвет, укажем ширину в 100%, высоту в 200 пик. и закруглим углы.

Верхнему меню назначим, свой цвет, ширину в 100%, сделаем отступ сверху в 5 пик., высоту в 50 пик.

Сайт бару, прописываем свои стили и прижмем его к левому краю:

Далее для области под контент пишем свои стили:

И завершающий блок это футер, делаем его на всю ширину в своем цвете:

Из-за того что sideLeft и content являются плавающими элементами за счет float , нужно сбросить обтекание этих блоков при помощи clear:both; .

Создадим класс и вставим дополнительный блок с этим классом:

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

Подключаем CSS media queris

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

Затем для всех медиа запросов создадим отдельный файл media-queries.css , который подключим после основного стиля.

Размер экрана меньше 992px

Открываем файл media-queries.css на редактирование, и напишем свое условие для дестопных экранов.

Начинаем с правила @media , скрываем стиле для браузеров которые их не поддерживают only , затем пишем носитель screen и логический оператор and « И », далее условие максимально ширины в 992 пик. то есть если страничка будет меньше данной ширины тогда применим наши стили.

Затем, в фигурных скобках описываем стили для данного расширения:

Ширину обертки уменьшим на 750 пик.

Поменяем у блоков цвет, а у footer немного уменьшим высоту:

Размер экрана меньше 768px

Затем опишем медеа запрос для средних экранов, таких как планшеты. Я скопирую предыдущий стили, заменю максимальную ширину на 768 пик. и в нем опишу стили для данного расширения экрана.

Обертку уменьшаем до 450 пик.

У header поменяем цвет, его высоту, и сделаем радиус в 3 пик.

Тоже самое проделаем с top_menu

Левый сайт бар, меняем цвет, делаем по всей ширине, уменьшаем отступ до 4 пик. убираем обтекание.

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


Убираем высоту .sideLeft

Для блока под контент, меняем цвет, делаем ширину в 100%, отступ в 4 пик, уменьшаем высоту и убираем обтекание.

Затем footer немного уменьшим по высоте, цвет и отступ немного подкорректируем:

Цукерберг рекомендует:  Бесплатка иконки на тему спорт и игры

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

Затем опишем общие стили, и скроем их:

Размер экрана меньше 480px

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

Делаем обертку в 320 пик.

У остальных блоков поменяем цвет.

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

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

Подключаем Media Queries Javascript

Медио запросы не поддерживаются браузером Internet Explorer 8 и более ранних версий, для них нужно подключить дополнительный Javascript файл css3-mediaqueries.js .

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

СSS3 Медиа Запросы — Примеры

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

Рассмотрим еще несколько примеров использования медиа запросов.

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

Пример

/* Установите цвет фона body tan */
body <
background-color: tan;
>

/* На экраны, которые 992px или меньше, установить цвет фона blue */
@media screen and (max-width: 992px) <
body <
background-color: blue;
>
>

/* На экранах с разрешением не более 600 пикселей, установите цвет фона olive */
@media screen and (max-width: 600px) <
body <
background-color: olive;
>
>

Вы задаетесь вопросом, почему мы используем именно 992 пикселя и 600 пикселей? Это то, что мы называем «типичными точками прерывания» для устройств. Вы можете прочитать больше о типичных точках прерывания в нашем Учебник адаптивный веб дизайн.

Медиа запросы для меню

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

Пример

/* Контейнер навигации */
.topnav <
overflow: hidden;
background-color: #333;
>

/* Навигационные ссылки */
.topnav a <
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* На экранах шириной 600 пикселей или меньше сделайте стек ссылок меню сверху друг друга, а не рядом друг с другом */
@media screen and (max-width: 600px) <
.topnav a <
float: none;
width: 100%;
>
>

Медиа запросы для столбцов

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

Пример

/* Создайте четыре одинаковых столбца, которые плавают рядом друг с другом */
.column <
float: left;
width: 25%;
>

/* На экранах с разрешением 992px широко или более менее, пойдите от четырех колонн в две колонны */
@media screen and (max-width: 992px) <
.column <
width: 50%;
>
>

/* На экранах, которые 600 пикселей в ширину или меньше, сделать столбцы укладываются друг на друга, а не рядом друг с другом */
@media screen and (max-width: 600px) <
.column <
width: 100%;
>
>

Совет: Более современным способом создания макетов столбцов является использование CSS Flexbox (см. пример ниже). Однако, не поддерживается в Internet Explorer 10 и более ранних версий. Если вам требуется поддержка IE6-10, используйте поплавки (как показано выше).

Чтобы узнать больше о модулях гибких боксах макета модели, прочитайте нашу главу CSS3 Гибкий Бокс.

Чтобы узнать больше об адаптивном веб дизайне, прочитайте нашу Учебник Адаптивный Веб Дизайн .

Пример

/* Контейнер для flexboxes */
.row <
display: flex;
flex-wrap: wrap;
>

/* Четыре равные колонки */
.column <
flex: 25%;
padding: 20px;
>

/* На экранах, которые 992px или менее, уятановить от четырех колонн в две колонны */
@media screen and (max-width: 992px) <
.column <
flex: 50%;
>
>

/* На экранах шириной 600 пикселей или менее столбцы укладываются друг на друга, а не рядом друг с другом */
@media screen and (max-width: 600px) <
.row <
flex-direction: column;
>
>

Скрыть элементы медиа запросов

Другим распространенным использованием медиа запросов является скрытие элементов на экранах разного размера:

Пример

Изменение размера шрифта с помощью медиа запросов

Вы также можете использовать медиа запросы для изменения размера шрифта элемента на различных размерах экрана:


Переменный размер шрифта.

Пример

в 80 пикселей */
@media screen and (min-width: 600px) <
div.example <
font-size: 80px;
>
>

/* Если размер экрана 600px широкий, или меньше, установите размер шрифта

Гибкая галерея изображений

В этом примере мы используем медиа запросы вместе с flexbox для создания отзывчивой галереи изображений:

Пример

Гибкий сайт

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

Пример

Ориентация: Книжная/Альбомная

Медиа-запросы также могут быть использованы для изменения формата страницы в зависимости от ориентация браузера.

Вы можете иметь набор свойств CSS, которые будут применяться, когда окно браузера шире, чем его высота, так называемый «Альбомная» ориентация:

Пример

Использовать светло-голубой цвет фона, если альбомный режим:

Минимальная ширина и максимальная ширина

Вы также можете использовать значения ( max-width: ..) и ( min-width: .. ) минимальной ширины и максимальной ширины.

Например, если ширина браузера составляет от 600 до 900px, измените внешний вид элемента

Пример

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

Пример

CSS Справочник @media

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

Совет: Чтобы узнать больше об адаптивном веб дизайне (как настроить задание на различные устройства и экраны), используя точки остановки медиа запросов, прочитайте нашу статью Учебник Адаптивный Веб Дизайн.

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

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

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

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

Табл. 1. Типы носителей и их описание

Тип Описание
all Все типы. Это значение используется по умолчанию.
print Принтеры и другие печатающие устройства.
screen Экран монитора.
speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

Следующие типы являются корректными, но устаревшими и не дают никакого результата (табл. 2).

Табл. 2. Устаревшие типы носителей

Тип Описание
braille Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed Принтеры, использующие для печати систему Брайля.
handheld Наладонные компьютеры и аналогичные им аппараты.
projection Проекторы.
tty Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv Телевизоры.

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

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме принтера

Оператор not оценивается в запросе последним, поэтому выражение

следует понимать как

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

Пример. Стиль для новых браузеров

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

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

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

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

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

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселей, а min-width: 1000px , наоборот, сообщает, что ширина окна больше 1000 пикселей.

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

Тип носителя: print, screen
Значение: целое число/целое число


Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: print, screen
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2 3 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное.

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

Тип носителя: print, screen
Значение: целое число

Определяет количество цветов, которое поддерживает устройство. В примере ниже показан стиль для экранов отображающих не меньше 256 цветов.

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

Тип носителя: print, screen
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере ниже показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

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

Тип носителя: print, screen
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

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

Тип носителя: print, screen
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере ниже в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселей ширина макета задаётся как 1100px.

Тип носителя: print, screen
Значение: нет

Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.

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

height (min-height, max-height)

Тип носителя: print, screen
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: print, screen
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксель. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В данном примере показан стиль для монохромного и цветного принтера.

orientation

Тип носителя: print, screen
Значение: landscape | portrait

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

В данном примере устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

resolution (min-resolution, max-resolution)

Тип носителя: print, screen
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

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

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: print, screen
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В данном примере при уменьшении окна до 600 пикселей и меньше меняется цвет фона веб-страницы.

Спецификация ?

Спецификация Статус
Media Queries Level 4 Рабочий проект
Media Queries Level 3 Рекомендация
CSS Level 2 (Revision 1) Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

9 12 1 9.2 1.3 1

Браузеры

В таблице браузеров применяются следующие обозначения.


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

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

Адаптивный сайт с помощью Media Queries

Адаптивный сайт на сегодняшний день является основным требованием к любому проекту. Не все знают как правильно построить сайт для корректного отображения на любых устройствах, используя все современные возможности HTML5.

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

На сегодняшний день выделить качественные сайты достаточно трудно — таких меньшинство. Что уж говорить об адаптивности — этот круг становится крайне узким. Многие владельцы сайтов по сей день не считают это серьёзной проблемой — что является серьёзной ошибкой.

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

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

Помимо мобильных устройств в ход пошли широкоформатные мониторы, которые разбивают старый стереотип на мелкие кусочки. Вёрстка сайта начинает съезжать и некорректно отображаться. Решение этой проблемы не заставило себя ждать!

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

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

HTML5 — это лучшее решение, которое решает проблему без потери фрагментов сайта и создания отдельной версии под мобильные устройства. А если быть точнее, то решением проблемы служит такая спецификация CSS3, как Media Queries.

Адаптивный дизайн с Media Queries

О нововведениях в HTML5 мы уже говорили, но ещё одно преимущество раскрывается именно в его использовании в адаптивности сайта. В совместном использовании с CSS3 появляется возможность использовать такую интересную спецификацию, как Media Queries.

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

Преимущество адаптивного сайта:

  • корректное отображение на всех устройствах
  • возможность детального контроля над любым блоком сайта
  • отсутствие дубликатов сайта
  • преимущество в ранжировке
  • повышение посещаемости
  • понижение отказов

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

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

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

Что касается посетителей сайта — адаптивность сайта не останется незамеченным: посещаемость будет расти, а отказы падать. Этот фактор положительно отразится на доходе проекта. Не говоря уже о существенной разгрузке сайта и простоте его использования.

Подробно о Media Queries

При качественной вёрстке и создания адаптивного сайта, корректность работы гарантирована, без всевозможных проблем.

Использование Media Queries имеет своеобразный синтаксис:

Под какие основыные размеры настраивать CSS @media screen?

Сабж. Смотрел разные исходники. Ничего не ясно.

У меня фикс. дизайн 960px в ширину по центру. Хочу адаптивный дизайн сделать.
Но какие именно размеры прописывать в media? По какому принципу они подбираются? Есть какая-то статистика по разрешениям мобильных приложений?

Смотрю сейчас чей-то исходник:

почему именно эти размеры указал верстальщик?

  • Вопрос задан более трёх лет назад
  • 48411 просмотров

Всегда использую эти( это старые брэйкпоинты bootstrap по умолчанию ):

/* Large desktops and laptops */
media (min-width: 1200px) <

/* Portrait tablets and medium desktops */
media (min-width: 992px) and (max-width: 1199px) <

/* Portrait tablets and small desktops */
media (min-width: 768px) and (max-width: 991px) <

/* Landscape phones and portrait tablets */
media (max-width: 767px) <

/* Landscape phones and smaller */
media (max-width: 480px) <

По надобности дописую промежуточные разрешения, если вдруг по дизайну что то падает на 650px, тогда дописую:

Использование медиа запросов CSS в адаптивном дизайне в 2020

Дата публикации: 2020-03-02

От автора: в июле 2010 я написала статью на Smashing Magazine «создание мобильной версии сайта с помощью CSS3 медиа запросов». Прошло почти 8 лет, а статья все еще привлекает большой трафик. Я подумала, что было бы неплохо вернуться к этой теме теперь, когда у нас есть такие методы макетирования, как Flexbox и Grid Layout. Статья расскажет про то, как сейчас используются медиа запросы CSS в адаптивном дизайне, а также про то, что будет в будущем.

Нужны ли вообще медиа запросы?

Первое правило использования медиа запросов в 2020 – спросите себя, нужны ли они вам. При создании макетов с помощью обтеканий мы создаем гибкую сетку путем вычисления размера колонок в процентах. Полученные проценты мы используем в методе Ethan Marcotte, который описан в его статье «жидкие сетки» и сформировал основу для техники «адаптивный дизайн». Если нам понадобится изменить размер или пропорции колонок, необходимо добавить брейкпоинт с помощью медиа запроса и переопределить значения. Работая с процентами, у нас нет других вариантов, так как значения в процентах всегда привязаны к контейнеру, расширяется он или сужается.

Flexbox, Grid Layout и макет Multi-column по умолчанию адаптивны. Эти спецификации были написаны, когда уже был адаптивный дизайн и поддержка нескольких устройств. Поэтому в них много общей функциональности, активирующей адаптивный дизайн без лишней возни.


В демо ниже представлены гибкие компоненты Multicol, Flexbox и Grid. Все меняют свой размер и макет под доступное пространство. В примере не используются медиа запросы, всего пара строк CSS.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

flex-basis для флекс элементов – 250 пикселей. Если для двух элементов размером 250 пикселей места не хватает, они отображаются друг под другом. Элементы могут расти (flex-grow – положительное значение), поэтому они будут расти и заполнять строки.

Замечательное свойство Flexbox заключается в том, что компонент ведет себя так в случае, если пространство ограничено размером экрана или компонент помещен в контекст, где у него меньше пространства в контейнере. Медиа запросы не могут решить эту проблему, так как они смотрят на функции всего экрана. Таким образом, новый макет дает нам то, чего не могут медиа запросы.

В демо ниже компонент ограничен вьюпортом (измените размер окна, чтобы оценить гибкость) и контейнером.

Если необходимо что-то большее, то придется подключать медиа запросы. Медиа запросы превосходно работают с Grid – можно полностью переопределить сетку одной строкой CSS или изменить расположение элементов. Для этого вам не понадобится править разметку. Сначала я создам сетку в одну колонку для узких экранов.

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

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

Лучшие практики медиа запросов

Как мы видим, медиа запросы не ушли. Но изменился способ их применения. Ниже собраны советы по наилучшему использованию медиа запросов в 2020.

Не определяйте устройства — добавляйте брейкпоинты, когда дизайн должен меняться

Когда мы только начали использовать медиа запросы, устройств было не так много. В действительности, большинство заботились только об iPhone. За пару месяцев устройства и их размеры быстро увеличились. Определять конкретные устройства стало бесполезно. Вместо этого добавляйте брейкпоинты на те размеры, когда дизайн должен меняться. Если начать с дизайна для самого маленького устройства и растягивать окно браузера, в какой момент строки станут слишком длинными для удобного чтения? Когда экран можно использовать лучше? Это и есть та точка, где можно добавить медиа запрос и написать дополнительный CSS.

Таким образом, устройства, попадающие под брейкпоинт получат узкий макет, а все что превосходит брейкпоинт – макет, использующий больше горизонтального пространства на экране. И неважно, iPhone это или Samsumg, или веб-дизайнер, играющийся с окном браузера.

Пиксели используются не везде

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

Уделите больше внимания сортировке flex и grid элементов

Преимущество Grid Layout по отношению к Flexbox заключается в возможности изменить порядок элементов в макете на разных брейкпоинатах. Для пользователей мобильных устройств и десктоп пользователей с клавиатурой и мышью это обеспечит отличный UX. Однако некоторых пользователей это может запутать. В частности, это пользователи с плохим зрением, пользующиеся скрин ридером, но которые видят большую часть контента на экране, а также те пользователи, которые перемещаются по сайту с помощью клавиатуры или устройства, отличного от мыши или пальцев.

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

Не забывайте о вертикальных медиа запросах

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

Один из примеров использования вертикальных медиа запросов или медиа запросов по высоте – проверка того, что высоты экрана достаточно для отображения многоколоночного макета без необходимость скролить окно вниз. В CSS коде ниже многоколоночный макет создаст колонки только, если места хватает под 2 колонки размером 15em. Поэтому нам не нужен медиа запрос по ширине. Я добавил медиа запрос min-height, чтобы текст перепрыгивал в колонки только при достижении разумной высоты. Если экран маленький и в альбомном режиме, я покажу только один столбец, и пользователь будет скролить вниз для чтения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Адаптивная верстка: media queries

Добрый день, уважаемые читатели!

Сегодня я бы хотел продолжить обсуждение адаптивной верстки.

В прошлой статье мы обсудили, как сделать простенький адаптивный дизайн. После создания мы выявили 1 большой минус:

На небольших экранах изображения будут слишком мелкими.

Как решить проблему? Media Queries!

Данную проблему можно решить благодаря новой возможности CSS: media queries.

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

В результате, если у пользователя экран меньше или равен 960 пикселей, то задний фон для класса . >красным .

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

Условия для Media Queries

Условия можно задать следующие условия:

Лично я чаще всего использую первое условие.

Способы подключения CSS-таблиц

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

Практика

Давайте доработаем пример из прошлой статьи:

HTML

CSS

Что получилось? Смотрим: демонстрация 1

При небольшом разрешении картинки становятся слишком мелкими, а текст в заголовке огромным.

Решим нашу проблему!

Добавляем Media Queries

Добавим в CSS следующий код:

Мы добавили проверку на разрешение. Если разрешение экрана меньше или равно 768 пикселей, то наша галерея перестраивается. В ряд у нас умещается теперь по 2 изображения (width 48% + padding 2%).

В результате фотографии на экране планшета стали выглядеть намного лучше!

Теперь разберемся с экраном поменьше.

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

Теперь мы имеет фотогалерею, которая удобно подстраивается под устройства. При желании можно добавить и другие разрешения (320 пкс, 960 пкс и т.д.).

Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!

Спасибо за внимание, жду вас в следующих статьях! Следующая статья: Адаптивная верстка: анимация

Подписывайтесь на рассылку ��

Что-то осталось неясным, неточным? Пишите в комментариях!

Автор статьи: Alex. Категория: CSS
Дата публикации: 16.12.2013

Цукерберг рекомендует:  Коддинг - Помогите с проектом С programming (English)
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих