Медиа запросы css – Как применяются медиа запросы CSS для создания адаптивных макетов: примеры работы с сеткой

Правило @media | CSS справочник

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

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

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

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

Пример

/* На экраны, которые 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 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%;
    }
}

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

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

Большые экраны:

Средние экраны:

Маленькие экраны:

Пример

/* На экранах с разрешением 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 Гибкий Бокс.

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

Пример

/* Четыре равные колонки */
.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;
  }
}

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

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

Я буду прятаться на маленьких экранах.

Пример

/* Если размер экрана 600 пикселей в ширину или меньше, скройте элемент */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

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

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

Пример

/* Если размер экрана 600px широкий, или меньше, установите размер шрифта <div> в 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

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

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

Гибкий сайт

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

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

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

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

Пример

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

@media only screen and (orientation: landscape) {
    body {
       background-color: lightblue;
    }
}

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

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

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

Пример

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

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

Пример

/* Когда ширина между 600px и 900px ИЛИ выше 1100px измененить внешний вид <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

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

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

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

Как применяются медиа запросы CSS для создания адаптивных макетов: примеры работы с сеткой

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

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

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

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

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

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

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

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

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

.media { display: flex; flex-wrap: wrap; } .media > * { flex: 1 1 250px; }

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

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

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

grid { display: grid; grid-gap: 1em; grid-template-columns: 1fr; }

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

@media (min-width: 40em) { .grid { grid-template-columns: 2fr 1fr; } header, footer { grid-column: 1 / 3; } }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-height: 500px) { section { column-width: 15em; } }

Media Queries Level 4: Чего ждать?

До сих пор мы используем медиа запросы для адаптивного дизайна из спецификации media queries Level 3. CSS Working Group разрабатывает новую спецификацию Media Queries Level 4. Эта спецификация изменит синтаксис и некоторый функционал. Не все еще реализовано в браузерах, однако интересно узнать, что нас может ждать в будущем, что нам поможет создавать UI, хорошо работающий с широким диапазоном устройств и форматов вывода.

Определяйте тип указателя, а не размер экрана

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

Когда у нас был только размер экрана, мы могли делать предположения только на его основе. Но это меняется. Теперь можно использовать лучшие показатели и их функции вместе с настройкой UI для разных пользователей. Более полезный индикатор устройства – это тип указателя пользователя, а также есть ли у них возможность наводить курсор на элементы на странице. Именно эти функции предоставляет Interaction Media Features медиа запросам. Примеры ниже будут работать в текущих версиях Chrome, Safari и Edge. Полный список поддержки можно посмотреть на Can I Use.

В демо ниже (можете протестировать в любом браузере с поддержкой на устройствах) я использую сгенерированный контент для вывода типа устройства, который, по моему мнению, вы используете. Для проверки типа указателя я использую код ниже:

@media (pointer:coarse) { .which-pointer::after { content: «You have a coarse pointer, are you on a touchscreen device?»; } } @media (pointer:fine) { .which-pointer::after { content: «You have a fine pointer, are you using a mouse or trackpad?»; } <p>}

Для проверки возможности наведения курсора я тестирую функцию hover:

@media (hover) { .can-i-hover::after { content: «You look like you can hover.»; } } @media (hover:none) { .can-i-hover::after { content: «I don’t think you can hover.»; } }

Проверьте сами в демо.

Также есть функции any-pointer и any-hover, которые проверяют возможности любых указывающих устройств пользователя – противоположность первичных указывающих устройств, проверяемых через pointer и hover. Советую использовать их осторожно, поскольку переход пользователя с основного устройства может ухудшить UX. Спецификация предлагает:

«Проектирование страницы с упором на возможность наведения курсора или точного выбора только потому, что any-hover и any-pointer указывают на то, что как минимум доступен один из механизмов ввода, поддерживающий эти возможности, скорее всего, приведет к ухудшению UX. Однако авторы могут использовать эту информацию, чтобы сообщить о выбранном стиле и функциональности, которые они хотят предоставить, на основе любых дополнительных указывающих устройств, доступных пользователю.»

Firefox отстает с реализацией Interaction Media Features. Можете подписаться и отслеживать баг по ссылке. Надеемся, в скором времени поддержка появится в этом браузере.

Определение переполнения с помощью Display Quality Media Features Link

Пока что не реализована функция overflow-block Display Quality Media Features с возможностью проверки того, как ведет себя медиа при переполнении контента.

При переполнении контента разные медиа ведут себя по-разному. Экран ПК или планшет отображают в этом случае полосу прокрутки. Некоторые устройства (например, билборды с цифровой рекламой) вообще не умеют переполнять контент. Контент также разбивается на страницы, если выводится на печать.

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

@media (overflow-block: paged) { }

Изменения синтаксиса

Медиа запросы, какими мы их знаем, могут быть довольно длинными. В level 4 внесено пару изменений в синтаксис, что поможет решить эту проблему. Например, нам часто необходимо задавать диапазон, как в медиа запросе ниже (работает в диапазоне ширины от 40em до 59em).

@media (min-width: 40em) and (max-width: 59em) { }

Его можно переписать в диапазон:

@media (40em <= width <= 59em ) { }

Во втором примере width должна быть больше или равна 40em и меньше или равна 59em. Этот способ намного короче, по сравнению с min- и max- в предыдущем примере. Вы сможете использовать старый синтаксис, он удаляться не будет. Более короткий способ – это бонус.

Медиа запросы – все еще полезный инструмент в создании адаптивных макетов. Я видел, как люди делали костыли на Grid, чтобы не задействовать медиа запросы. Однако нет причин избегать полезных медиа запросов. Надеюсь, я продемонстрировала, что есть новые и полезные функции, которые помогут улучшить UI для большего количества пользователей.

Автор: Rachel Andrew

Источник: https://www.smashingmagazine.com/

Редакция: Команда webformyself.

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

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

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

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

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

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

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

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

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

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

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

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

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

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

/* ------------------------------------------ */
/* ----- От маленьких экранов к большим ----- */
/* ------------------------------------------ */

/* Стили для очень маленьких экранов (телефоны в книжной ориентации,
дисплей менее 576 пикселей). Записываются без медиа-запросов,
поскольку в Bootstrap это значение по умолчанию */

/* Стили для маленьких экранов (телефоны в альбомной ориентации,
дисплей 576 пикселей и более) */
@media (min-width: 576px) { ... }

/* Стили для средних экранов (планшеты, дисплей 768 пикселей и более) */
@media (min-width: 768px) { ... }

/* Стили для больших экранов (ПК, дисплей 992 пикселей и более) */
@media (min-width: 992px) { ... }

/* Стили для очень больших экранов (ПК с большим монитором,
дисплей 1200 пикселей и более) */
@media (min-width: 1200px) { ... }

/* ------------------------------------------ */
/*------ От больших экранов к маленьким ------*/
/* ------------------------------------------ */

/* Стили для очень больших экранов (дисплей 1200 пикселей и более).
Записываются без медиа-запросов, так как контрольная точка
для очень больших экранов не имеет верхней границы по ширине */

/* Стили для больших экранов (дисплей максимум 1199 пикселей) */
@media (max-width: 1199px) { ... }

/* Стили для средних экранов (дисплей максимум 991 пикселей) */
@media (max-width: 991px) { ... }

/* Стили для маленьких экранов (дисплей максимум 767 пикселей) */
@media (max-width: 767px) { ... }

/* Стили для очень маленьких экранов (дисплей максимум 575 пикселей) */
@media (max-width: 575px) { ... }

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

/* Стили для очень маленьких экранов (дисплей максимум 575 пикселей) */
@media (max-width: 575px) { ... }

/* Стили для маленьких экранов (дисплей шириной от 576 пикселей до 767 пикселей) */
@media (min-width: 576px) and (max-width: 767px) { ... }


/* Стили для средних экранов (дисплей шириной от 768 пикселей до 991 пикселей) */
@media (min-width: 768px) and (max-width: 991px) { ... }


/* Стили для больших экранов (дисплей шириной от 992 пикселей до 1199 пикселей) */
@media (min-width: 992px) and (max-width: 1199px) { ... }


/* Стили для очень больших экранов (дисплей минимум 1200 пикселей) */
@media (min-width: 1200px) { ... }

Mobile First или Desktop First?

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

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

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

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

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

@media (min-width: 576px) {
	/* здесь будут CSS-стили */
}

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

@media (min-width: 576px) {
	.column {
		width: 100%;
	}
	h2 {
		font-size: 24px;
	}
	/* и так далее... */
}

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

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

CSS Медиа запросы, зачем only? — Хабр Q&A

@media screen and (max-width: 650px) {}
@media screen and (max-width: 1020px) {}
@media screen and (max-width: 320px) {}

Media Screen CSS в адаптивной верстке

Пришло время разобраться, что такое Media Screen в CSS3 и как это применять в своих проектах. Это так называемые Медиа-запросы CSS, с помощью которых можно адаптировать элементы дизайна под разные размеры экранов. Например можно скрыть определенный блок на мобильных и наоборот показывать его только на широких экранах (десктопах). Как я с этим столкнулся. На клиентском сайте логотип на мобильных съезжает вправо, на компьютерах он наоборот слева. Была поставлена задача написать текст, который будет показан слева от лого на маленьких экранах. На больших его быть не должно. На выручку как раз и пришли медиа-запросы Media Screen CSS. Я знаю, что многие из вас очень любят, когда им показывают наглядно, поэтому приготовил пример.

Media-screen примеры

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

Для начала в head нужно добавить такую строчку:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″/>

CSS код сейчас такой:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#header{
	height:120px;
	position:relative
	padding:5px;
}
#content{
	background:#fff000;
	padding:5px;
}
p {
    padding: 5px;
}	
 .txt {
    font: 65px Verdana bold;
    position: relative;
    top: 16px;
    color: #fff;
    left: 80px;
   }
img{
     margin:5px;
}

#header{ height:120px; position:relative padding:5px; } #content{ background:#fff000; padding:5px; } p { padding: 5px; } .txt { font: 65px Verdana bold; position: relative; top: 16px; color: #fff; left: 80px; } img{ margin:5px; }

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

То есть мы произведем кардинальные изменения на странице средствами Media screen CSS. Для этого пишем те самые медиа-запросы, которые будут определять ширину экрана девайса и выдавать тот или иной вид.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

 @media screen and (max-width: 1000px) {
#header {
	background:#543567; /* Красим шапку */
	}
   }
 @media screen and (min-width: 1000px) {
 .txt {
      font: 25px Verdana bold; /* Показываем заголовок */
      position:relative;
      top; 15px;
      left: 30px;
      display:none;	
	}
   }
@media screen and (max-width: 1000px) {
#content {
	 background:#657493; /* Меняем цвет текста и фона содержимого */
	 color:#fff;			
	}
   }
@media screen and (max-width: 1000px) {
    img {
	float:right; /* Смещаем логотип вправо */			
	}
   }

@media screen and (max-width: 1000px) { #header { background:#543567; /* Красим шапку */ } } @media screen and (min-width: 1000px) { .txt { font: 25px Verdana bold; /* Показываем заголовок */ position:relative; top; 15px; left: 30px; display:none; } } @media screen and (max-width: 1000px) { #content { background:#657493; /* Меняем цвет текста и фона содержимого */ color:#fff; } } @media screen and (max-width: 1000px) { img { float:right; /* Смещаем логотип вправо */ } }

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

Демо

Изменяйте ширину окна браузера, чтобы увидеть изменения. В Хроме есть функция просмотра на разных устройствах. Клавиша F12 Фактически в Media screen CSS мы создаем новые правила, которые вступят в силу только при определенных условиях. В данном случае, если дисплей будет меньше или равен 1000 px. Если будет больше, то ничего меняться не будет.

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

1

<link rel= "stylesheet" href= "device.css" media= "only screen and (max-device width:640px)"/>

<link rel= «stylesheet» href= «device.css» media= «only screen and (max-device width:640px)»/>

Можно так же взять готовые стили из Bootstrap CSS и подогнать под свой дизайн.

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

Вы здесь: Главная — CSS — CSS Основы — Медиа-запросы в CSS

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

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

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

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

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

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

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

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

• Создано 12.03.2014 12:09:54
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]