Содержание

Обзор. Разметка · Bootstrap. Версия v4.0.0

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

Контейнеры

Это базовый элемент в Bootstrap и они необходимы при использовании нашей стандартной сеточной системы. Выбирайте отзывчивый, с фиксированной шириной (что значит, что его max-width изменяется на каждом брейкпойнте) или контейнер с плавающей шириной (width ==100% всегда).

Контейнеры могут иметь вложенные элементы, но в большинстве случаев можно обойтись без них.

<div>
  <!-- Content here -->
</div>

Используйте .container-fluid для создания контейнера полной ширины, занимающий 100% зоны просмотра.

<div>
  .
.. </div>

Отзывчивые брейкпойнты

Поскольку Bootstrap разработан как mobile-first, тут используются медиа-запросы @media для создания брейкпойнтов контента и интерфейсов. Эти брейкпойнты в основном сделаны на минимальных широтах зоны просмотра и позволяют масштабировать элементы по мере изменения размера зоны просмотра.

В исходниках Sass Bootstrap главным образом записаны следующие ранги @media (брейкпойнты) для разметки, сеточной системы и компонентов.

// Экстрамалые девайсы («телефоны», = 576px)
@media (min-width: 576px) { ... }

// Средние девайсы («таблетки», >= 768px)
@media (min-width: 768px) { ... }

// Большие девайсы (десктопы, >= 992px)
@media (min-width: 992px) { ... }

// Экстрабольшие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Так как все эти параметры записаны в исходниках как Sass, все @media доступны через миксины:

@include media-breakpoint-up(xs) { . .. }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

По случаю можно использовать и другие размеры (max-width: 575px == «данный размер или меньше»):

// Экстрамалые девайсы («телефоны», 

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

Опять же, эти @media доступны через Sass миксины:

@include media-breakpoint-down(xs) { . .. }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Также в наличии @media и миксины размеров экрана, использующие минимальные и максимальные ширины брейкпойнтов.

// Экстрамалые девайсы («портретные телефоны», = 575px)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Средние девайсы («таблетки», >= 768px) 
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Большие девайсы (большие десктопы, >= 992px)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Большие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Эти @media также доступны из миксинов Sass:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { . .. }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Также, @media могут занимать несколько значений ширин брейкпойнта:

// Пример
// Здесь стили применятся от средних девайсов до XL-девайсов
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Миксины Sass для захвата таких же параметров (выше) выглядели бы так:

@include media-breakpoint-between(md, xl) { ... }

Z-индекс

Несколько компонентов Bootstrap используют данный индекс z-index, т.е. свойство CSS, которое помогает контролировать расположение контента с помощью третьей оси. В Bootstrap используется «стандартный» Z-индекс, спроектированный для правильного расположения навигации, всплывающих подсказок, всплывающих окон и т.н. “modals” (pop-up окно наверху страницы).

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

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

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

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

z-index 1,2,3, а также hover и «активные состояния». В hover/focus/active мы подводим частный элемент к «переднему краю» использованием более высокого z-индекса, для показа его границы над вложенными элементами.

Обзор · Bootstrap на русском

Варианты структурирования страниц с Bootstrap, включая глобальные стили, требуется монтаж, блочная система и более.

Bootstrap включает в себя несколько компонентов и вариантов для создания вашего проекта, в том числе упаковочной тары, мощная блочная система, гибкий медиа объект и aдаптивные полезные классы.

Контейнеры

Контейнеры являются самыми основными элементом разметки Bootstrap и необходим при использовании нашей блочной системы. Выбрать из aдаптивных, контейнер фиксированной ширины (то есть max-width изменения в каждой контрольной точке) или fluid-width (то есть 100% ширины всегда).

Хотя контейнеры могут быть вложенными, большинство макетов не требуют вложенного контейнера.

<div>
  <!-- Содержание здесь -->
</div>

Для того чтобы растянуть контейнер по всей ширине используйте .container-fluid

<div>
  ...
</div>

Адаптивные точки прерывания

Поскольку Bootstrap разработан, чтобы быть mobile first, мы используем небольшое количество медиа запросы для создания разумной точки прерывания для нашей разметки и интерфейсов. Эти точки в основном на основе минимальной ширины области просмотра и позволяют масштабировать элементы при изменении области просмотра.

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

// Дополнительные небольшие устройства (портрет телефонах, менее 544px)
// Нет медиа запросов, так как это по умолчанию в Bootstrap
// Небольших устройств (телефоны альбомной ориентации, 544px и вверх)@media (min-width: 544px) { . .. }
// Устройствах среднего (планшеты, 768px и выше)
@media (min-width: 768px) { ... }
// Крупных устройств (настольные компьютеры, 992px и выше)@media (min-width: 992px) { ... }
// Очень больших устройств (большие компьютеры, 1200px и выше)
@media (min-width: 1200px) { ... }

Так как мы пишем наш источник CSS в Sass, Все медиа запросы доступны через Sass примеси:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Пример использования:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Мы изредка используем медиа запросы, которые идут в другую сторону (данный Размер экрана or smaller):

// Очень малые устройства (портрет телефонов, менее 544px)
@media (max-width: 543px) { ... }
// Небольших устройств (альбомной телефонов, меньше, чем 768px по)
@media (max-width: 767px) { . .. }
// Устройствах среднего (планшеты, меньше, чем 992px)
@media (max-width: 991px) { ... }
// Крупных устройств (настольных компьютеров, меньше 1200px)
@media (max-width: 1199px) { ... }
// Очень крупных устройств (большие компьютеры)
// No media query since the extra-large breakpoint has no upper bound on its width

В очередной раз эти медиа запросы через Sass примеси:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Мы также имеем медиа от минимальной точки прерывания и максимальное значение только для данного размера экрана:

// Очень малые устройства (портрет телефонов, менее 544px)
@media (max-width: 543px) { ... }
// Небольших устройств (альбомной телефоны, 544px и вверх)
@media (min-width: 544px) and (max-width: 767px) { ... }
// Устройствах среднего (планшеты, 768px и выше)
@media (min-width: 768px) and (max-width: 991px) { . .. }
// Крупных устройств (настольных компьютеров, 992px и выше)
@media (min-width: 992px) and (max-width: 1199px) { ... }
// Очень больших устройств (большие компьютеры, 1200px и выше)
@media (min-width: 1200px) { ... }

Эти медиа запросы через Sass примеси:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

И, наконец, медиа, Что охватывает несколько точек прерывания ширины:

// Пример
// Средних устройствах (планшеты, 768px и выше) и больших устройств (настольных компьютеров, 992px и выше)
@media (min-width: 768px) and (max-width: 1199px) { ... }

В Sass mixin Для приведенного выше примера выглядят, как показано ниже:

@include media-breakpoint-between(md, lg) { ... }

Обзор · Bootstrap v4.

6

Посмотреть на GitHub Оригинал

Компоненты и опции для компоновки Вашего проекта Bootstrap, включая контейнеры-оболочки, мощную систему сеток, гибкий медиа-объект и адаптивные служебные классы.

Контейнеры

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

Bootstrap поставляется с тремя разными контейнерами:

  • .container, который устанавливает максимальную ширину max-width в каждой ответной контрольной точке
  • .container-fluid, который равен ширине width: 100% во всех контрольных точках
  • .container-{breakpoint}, который равен ширине width: 100% до указанной контрольной точки

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

Посмотрите на них в действии и сравните их в нашем примере сетки.

Очень маленький
<576px
Маленький
≥576px
Средний
≥768px
Большой
≥992px
Очень большой
≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
. container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

Все в одном

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

<div>
  <!-- Контент здесь -->
</div>

На всю ширину

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

<div>
  ...
</div>

Отзывчивый

Адаптивные контейнеры — это новинка Bootstrap v4.4. Они позволяют Вам указать класс шириной 100% до достижения указанной контрольной точки, после чего мы применяем max-width для каждой из более высоких контрольных точек. Например, .container-sm имеет 100% ширину для начала до тех пор, пока не будет достигнута контрольная точка sm, где он будет масштабироваться с помощью md, lg и xl.

<div>100% шириной до маленькой контрольной точки</div>
<div>100% шириной до средней контрольной точки</div>
<div>100% шириной до большой контрольной точки</div>
<div>100% шириной до очень большой контрольной точки</div>

Отзывчивые контрольные точки

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

Bootstrap в основном использует следующие диапазоны медиа-запросов — или контрольные точки — в наших исходных файлах Sass для нашей разметки, системы сеток и компонентов.

// Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
// Нет медиа-запроса для `xs`, так как это значение по умолчанию в Bootstrap
// Небольшие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (min-width: 576px) { ... }
// Средние устройства (планшеты, 768 пикселей и выше)
@media (min-width: 768px) { ... }
// Большие устройства (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) { ... }
// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200px) { ... }

Поскольку мы пишем наш исходный CSS на Sass, все наши медиа-запросы доступны через миксины Sass:

// Для контрольной точки xs не требуется медиа-запрос, поскольку он фактически `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Пример: Скрыть начало с `min-width: 0`, а затем показать в контрольной точке`sm`
. custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Иногда мы используем медиа-запросы, идущие в другом направлении (заданный размер экрана или меньше):

// Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (max-width: 575.98px) { ... }
// Небольшие устройства (телефоны с горизонтальной ориентацией, менее 768 пикселей)
@media (max-width: 767.98px) { ... }
// Средние устройства (планшеты, менее 992 пикселей)
@media (max-width: 991.98px) { ... }
// Большие устройства (настольные компьютеры, менее 1200 пикселей)
@media (max-width: 1199.98px) { ... }
// Очень большие устройства (большие рабочие столы)
// Нет медиа-запроса, так как очень большая контрольная точка не имеет верхней границы ширины

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

Еще раз, эти медиа-запросы также доступны через миксины Sass:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// Для контрольной точки xl не требуется медиа-запрос, так как он не имеет верхней границы ширины
// Пример: стиль от средней контрольной точки и ниже
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

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

// Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (max-width: 575.98px) { ... }
// Небольшие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Средние устройства (планшеты, 768 пикселей и выше)
@media (min-width: 768px) and (max-width: 991. 98px) { ... }
// Большие устройства (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200px) { ... }

Эти медиа-запросы также доступны через миксины Sass:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Точно так же медиа-запросы могут охватывать несколько значений ширины контрольной точки:

// Пример
// Применяйте стили, начиная со средних и заканчивая очень большими.
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Миксин Sass для таргетинга на тот же диапазон размеров экрана:

@include media-breakpoint-between(md, xl) { ... }

Z-index

Некоторые компоненты Bootstrap используют z-index, свойство CSS, которое помогает управлять макетом, предоставляя третью ось для упорядочивания содержимого. Мы используем шкалу z-индекса по умолчанию в Bootstrap, которая была разработана для правильного разделения навигации, всплывающих и всплывающих подсказок, модальных окон и многого другого.

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

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

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Чтобы обрабатывать перекрывающиеся границы внутри компонентов (например, кнопок и входов в группах ввода), мы используем малые однозначные значения z-index, равные 1, 2 и 3 для состояний по умолчанию, при наведении курсора и активного состояния. При наведении/фокусе/активном мы выводим конкретный элемент на передний план с более высоким значением z-index, чтобы показать его границу над соседними элементами.

CSS media

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Измените цвет фона элемента <BODY> на «lightblue», если окно обозревателя 600px широко или менее:

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Подробнее примеры ниже.


Определение и использование

Правило @media используется в запросах мультимедиа для применения различных стилей для различных типов носителей/устройств.

Мультимедийные запросы можно использовать для проверки многих вещей, таких как:

  • Ширина и высота видового экрана
  • Ширина и высота устройства
  • ориентация (планшет/телефон в альбомном или книжном режиме?)
  • Разрешение

Использование мультимедийных запросов — популярный способ доставки адаптированной таблицы стилей (Адаптивный веб-дизайн) к настольным компьютерам, ноутбукам, планшетам и мобильным телефонам.

Можно также использовать запросы мультимедиа, чтобы указать, что определенные стили предназначены только для печатных документов или для чтения с экрана (MediaType: печать, экран или речь).

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


Поддержка браузера

Номера в таблице указывают первую версию обозревателя, полностью поддерживающую правило @media.

Свойство
@media 21 9 3.5 4.0 9



Синтаксис CSS

@media not|only mediatype and (media feature and|or|not mediafeature) {
    CSS-Code;
}

значение не, только и и ключевые слова:

Нет: Ключевое слово NOT возвращает значение всего мультимедийного запроса.

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

и: Ключевое слово and объединяет мультимедийный объект с типом носителя или другими мультимедийными функциями.

Все они необязательны. Однако при использовании Not или onlyнеобходимо также указать тип носителя.

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

<link rel=»stylesheet» media=»screen and (min-width: 900px)» href=»widescreen.css»>
<link rel=»stylesheet» media=»screen and (max-width: 600px)» href=»smallscreen.css»>
….

Media Types

Значение Описание
all По умолчанию. Используется для всех устройств типа носителя
print Используется для принтеров
screen Используется для компьютерных экранов, планшетов, смарт-телефонов и т. д.
speech Используется для скринреадерс, что «читает» страницы вслух

Media Features

Значение Описание
any-hover Позволяет ли любой доступный механизм ввода пользователю навести курсор на элементы? (Добавлено в Media запросы уровень 4)
any-pointer Есть ли доступный механизм ввода указывающего устройства, и если да, то насколько он точен? (Добавлено в Media запросы уровень 4)
aspect-ratio Соотношение между шириной и высотой видового экрана
color Число битов на компонент цвета для устройства вывода
color-gamut Приблизительный диапазон цветов, поддерживаемых агентом пользователя и устройством вывода (Добавлено в Media запросы уровень 4)
color-index Количество цветов, которые может отображать устройство
grid Является ли устройство сеткой или растровым изображением
height Высота видового экрана
hover Позволяет ли основной входной механизм пользователю навести курсор на элементы? (Добавлено в Media запросы уровень 4)
inverted-colors Браузер или базовая операционная система переворачивают цвета? (Добавлено в Media запросы уровень 4)
light-level Текущий уровень освещенности (добавлен в Media-запросах уровень 4)
max-aspect-ratio Максимальное соотношение между шириной и высотой области отображения
max-color Максимальное число битов на компонент цвета для устройства вывода
max-color-index Максимальное количество цветов, которое может отображать устройство
max-height Максимальная высота области отображения, например окно обозревателя
max-monochrome Максимальное количество битов на «цвет» на монохромном устройстве (в оттенках серого)
max-resolution Максимальное разрешение устройства с помощью dpi или DPCM
max-width Максимальная ширина области отображения, например окно обозревателя
min-aspect-ratio Минимальное соотношение между шириной и высотой области отображения
min-color Минимальное количество битов на компонент цвета для устройства вывода
min-color-index Минимальное количество цветов, которое может отображать устройство
min-height Минимальная высота области отображения, например окно обозревателя
min-monochrome Минимальное количество битов на «цвет» на монохромном устройстве (в оттенках серого)
min-resolution Минимальное разрешение устройства с помощью dpi или DPCM
min-width Минимальная ширина области отображения, например окно обозревателя
monochrome Количество битов на «цвет» на монохромном устройстве (в оттенках серого)
orientation Ориентация видового экрана (ландшафтный или книжный режим)
overflow-block Как устройство вывода обрабатывает содержимое, переполненное видовым экраном вдоль оси блока (Добавлено в Media запросы уровень 4)
overflow-inline Можно прокручивать содержимое, переполненное видовым экраном вдоль встроенной оси (Добавлено в Media-запросах уровень 4)
pointer Является ли основной входной механизм указывающим устройством, и если да, то насколько он точен? (Добавлено в Media запросы уровень 4)
resolution Разрешение выходного устройства с помощью dpi или DPCM
scan Процесс сканирования устройства вывода
scripting Доступны ли скрипты (например, JavaScript)? (Добавлено в Media запросы уровень 4)
update Как быстро устройство вывода может изменить внешний вид содержимого (Добавлено в Media запросы уровень 4)
width Ширина видового экрана


Другие примеры

Пример

Скрытие элемента, если ширина обозревателя 600px шириной или меньше:

@media screen and (max-width: 600px) {
  div. example {
    display: none;
  }
}

Пример

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

body {
    background-color: lightblue;
}

@media screen and (min-width: 400px) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (min-width: 800px) {
    body {
        background-color: lavender;
    }
}

Пример

Создание адаптивного меню навигации (отображается горизонтально на больших экранах и вертикально на маленьких экранах):

@media screen and (max-width: 600px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}

Пример

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

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
    . column {
        width: 50%;
    }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

Пример

Используйте запросы мультимедиа для создания адаптивного веб-сайта:

Пример

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

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

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

Пример

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

@media screen {
    body {
        color: green;
    }
}

@media print {
    body {
        color: black;
    }
}

Пример

Список разделенных запятыми: добавьте дополнительный мультимедийный запрос к уже существующему, используя запятую (это будет вести себя как оператор OR):

/* When the width is between 600px and 900px OR above 1100px — change the appearance of <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 Справочник: CSS Media Queries

CSS Справочник: CSS Media Queries Examples

RWD Tutorial: Responsive Web Design with Media Queries

JavaScript Tutorial: The window.matchMedia() method

❮ Назад Полный CSS Справочник Дальше ❯

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

  • Содержание
    • Спецификация
    • Браузеры

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

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

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

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

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

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

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

and

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

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

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

not

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

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

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

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

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

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

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

а не

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

only

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

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

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

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

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

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

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

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

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

Большинство функций содержат приставку 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 означает, что красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное.

@media screen and (color) { /* Для цветных экранов */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
  body { background: #ccc; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина макета</title>
  <style>
   div {
    padding: 10px;
    background: #e8bfad;
    margin: auto;
   }
   @media screen and (min-device-width: 1600px) {
    div {width: 1500px;}
   }
   @media screen and (device-width: 1280px) {
    div {width: 1100px;}
   }
   @media screen and (device-width: 1024px) {
    div {width: 980px;}
   }
  </style>
 </head>
 <body>
  <div>
   Диабаз, формируя аномальные геохимические ряды, сменяет известняк, 
   образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.
  </div>
 </body>
</html>

grid

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стиль для бабушкофона</title>
  <style>
   @media screen and (grid) and (max-width: 15em) {
     body { font-size: 2em; }
   }
  </style>
 </head>
 <body>
  <p>Привет! Как дела? Как сажа бела?</p>
 </body>
</html>

height (min-height, max-height)

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

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

monochrome (min-monochrome, max-monochrome)

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

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

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

orientation

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

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

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

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

resolution (min-resolution, max-resolution)

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

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

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

scan

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

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

width (min-width, max-width)

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина страницы</title>
  <style>
   body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; }
   }
  </style>
 </head>
 <body>
  <p>Пока магма остается в камере, мусковит сингонально поднимает шток, 
  в то время как значения максимумов изменяются в широких пределах. </p>
 </body>
</html>

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

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

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

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

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

Браузеры

9 12 1 9.2 1.3 1
1 1 9 3.1

Браузеры

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

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

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

См. также

  • Отзывчивый веб-дизайн

Рецепты

  • Как менять размер текста при изменении размера окна?

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

как использовать медиа-запросы — учебник 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.

Обзор

· Bootstrap

Компоненты и параметры для макета вашего проекта Bootstrap, включая контейнеры-оболочки, мощную систему сетки, гибкий медиа-объект и адаптивные служебные классы.

Контейнеры

Контейнеры являются самым основным элементом макета в Bootstrap и требуются при использовании нашей системы сетки по умолчанию . Выберите из адаптивного контейнера с фиксированной шириной (это означает, что его максимальная ширина изменяется в каждой точке останова) или гибкой ширины (что означает, что это 100% в ширину постоянно).

Хотя контейнеры могут быть вложенными, для большинства макетов вложенный контейнер не требуется.

 <дел>
  

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

 <дел>
  ...