27 августа 2015  /  Фронтенд

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

Twitter Bootstrap — самый популярный CSS фреймворк. У него более 85 495 звезд и 35 055 форков на GitHub. А 19 августа вышла 4 альфа версия, в которой разработчики используют rem для адаптивной верстки. Но не в медиа выражениях, которые остаются такими-же как и были.

Bootstrap использует 5 контрольных точек для медиа выражений: 320px, 544px, 768px, 992px, 1200px. Этот фреймворк следует методике mobile first, в которой сначала сайта разрабатывается для мобильных устройств, а потом появляется для десктопов.

/*==========  Mobile First  ==========*/

/* Телефоны —  544px */
@media (min-width : 34em) {}

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

/* Десктоп — 992px */
@media (min-width : 62em) {}

/* Широкоформатный экран — 1200px */
@media (min-width : 75em) {}

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

/*==========  Non-Mobile First  ==========*/

/* Широкоформатный экран — 1200px */
@media (max-width : 75.063em) {}

/* Десктоп — 992px */
@media (max-width : 62.063em) {}

/* Планшеты — 768px */
@media (max-width : 48.063em) {}

/* Телефоны —  544px */
@media (max-width : 34.063em) {}

/* Айфон в портретном режиме — 320px */
@media (max-width : 20.063em) {}

Шестьдесят три сотых ема — это один пиксель. Он нужен чтобы наше выражение сработало когда ширина экрана станет нужной (320, 544, 768…).

Дополнения

1. В медиа выражениях не используются никакие screen и only screen.
2. em зависят от размера шрифта у body. Он должен быть равен 16px чтобы все работало как нам нужно.
3. Предпочтительней использовать em вместо пикселей, чтобы ваша верстка не поехала если пользователь изменил стандартный размер шрифта.
4. Значение em в медиа выражениях эквавалентно 16 пикселям, и не зависит от размера шрифта у html или body.

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

⌘ ⌘ ⌘

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