Как использовать контрольные точки CSS для создания адаптивного дизайна

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

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

Давайте начнем!

Что такое точка останова CSS?

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

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

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

Как установить контрольные точки CSS

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

Итак, какой подход вы должны использовать для своих точек останова?

Возможны два возможных подхода:

• Точки останова на основе устройства
• Точки останова на основе контента

Точки останова CSS в зависимости от устройства

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

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

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

При таком подходе вы получите огромный список медиа-запросов.

Точки останова CSS на основе содержимого

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

Эта точка останова означает, что CSS будет применяться, когда ширина устройства составляет 768 пикселей и выше.

 [css]@media only screen (min-width: 768px){ ... }[/css]

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

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

Когда использовать контрольные точки CSS минимальной или максимальной ширины

Вы можете установить точки останова по-разному, используя min-width , max-width или даже комбинируя оба. Но вопрос в том, когда вы должны использовать каждый из них?

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

Установите стили по умолчанию для небольшого устройства и просто соответствующим образом настройте их для больших устройств.

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

Использование точек останова CSS с SASS

Если вы используете препроцессор, такой как SASS или SCSS, вы можете написать гораздо более умные точки останова. Mixin позволяет вам создавать больше декларативных точек останова для запоминания, например:

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

При работе в группе гораздо легче запомнить «планшет вверх», чем 768px или 48em. Любой может понять эту точку останова; это для планшетов и выше размеров экрана.

Какие точки останова CSS использовать

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

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

Bootstrap имеет контрольные точки на 576px, 768px, 992px и 1200px. Foundation в основном имеет точки останова на 40em и 64em. В Bulma контрольные точки установлены на 768px, 769px, 1024px, 1216px и 1408px.

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

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

Вы поняли идею!

Подведение итогов

Подводя итог, точки останова CSS — отличный способ реструктурировать макет, чтобы обеспечить наилучшее взаимодействие с пользователем на разных устройствах.

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

Какие контрольные точки CSS вы используете для своих макетов? Дайте нам знать в разделе комментариев ниже.

Что дальше?

Создавайте и тестируйте свои собственные блоки Гутенберга с Local бесплатно!

Узнайте больше о Local здесь!

Чтобы получить дополнительные советы по созданию адаптивных сайтов, ознакомьтесь с этими статьями!

• Как сделать ваш сайт WordPress мобильным
• Как создать адаптивное меню навигации в WordPress
• 7 лучших советов по адаптивному веб-дизайну