Верх страницы
Обложка к записи Контрольные точки медиа-выражений Bootstrap
Время для прочтения: 0 мин. 21 сек.

Контрольные точки медиа-выражений Bootstrap

Twitter Bootstrap — самый популярный CSS-фреймворк. У него более 165к звезд и 79к форков на GitHub.

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

Контрольная точкаЗначение, px
Extra small<576
Small≥576
Medium≥768
Large≥992
Extra large≥1200
Extra extra large≥1400

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

Mobile First

Все медиа выражения основаны на min-width:

// Телефоны в портретном режиме
// Нет медиа выражения

// Телефоны в альбомном режиме
@media (min-width: 576px) { ... }

// Планшеты
@media (min-width: 768px) { ... }

// Десктопы
@media (min-width: 992px) { ... }

// Широкоформатные экраны
@media (min-width: 1200px) { ... }

// Огромные экраны
@media (min-width: 1400px) { ... }

Non-Mobile First

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

Все медиа-выражения основаны на max-width. Берём контрольные точки и вычитаем из них .02px, а потом используем полученные значения качестве значений максимальной ширины:

// Телефоны в портретном режиме
@media (max-width: 575.98px) { ... }

// Телефоны в альбомном режиме
@media (max-width: 767.98px) { ... }

// Планшеты
@media (max-width: 991.98px) { ... }

// Десктопы
@media (max-width: 1199.98px) { ... }

// Широкоформатные экраны
@media (max-width: 1399.98px) { ... }

Замечания

Зачем вычитать .02px? Браузеры в настоящее время не поддерживают range context queries, поэтому таким способом мы обходим ограничения min- и max- префиксов. Такая проблема может проявляться на устройствах с высоким разрешением точек на дюйм.

В медиа-выражениях не используем никакие screen и only screen.

Если вам нужно больше контрольных точек, то отталкивайтесь от этих размеров экранов — 120, 160, 240, 320, 360, 480, 540, 576, 600, 640, 720, 768, 800, 864, 900, 960, 1024, 1050, 1080, 1152, 1200, 1400, 1536, 1600, 1620, 1800, 2048, 2160, 2400, 3072, 3200, 3240, 4096, 4320, 4800.

RTFM

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, OpenCart, DLE, Laravel, Moonshine, Symfony, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Предыдущая запись

Давайте дружить
в Telegram

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы