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

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

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

Этот фреймворк следует методике 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

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