adaptive

🎓 Вёрстка (HTML/CSS)

---

адаптивная вёрстка

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

🎓 Принципы адаптивного дизайна

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

• гибкость текстового содержимого достигается путем вычисления размеров шрифта относительно размера шрифта;

• проблема гибких изображений решается с помощью правила img {width: 100%; max-width: 100%;} для всех картинок на сайте. Это правило гарантирует, что изображения никогда не будут шире, чем их контейнеры и никогда не превысят своих истинных размеров на больших экранах;

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

🎓 Дополнительные приёмы

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

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

• большое кликабельное пространство для кнопок — чем больше активная область кнопки, тем легче пользователю взаимодействовать с ней;

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

🎓 Мета-тег viewport

Чтобы мобильные браузеры не изменяли автоматически размер страниц сайта, используется специальный тег <meta> с атрибутом name="viewport". В данном теге допускается устанавливать определенное значение для параметров width и initial-scale:

<meta name="viewport" content="width=device-width, initial-scale=1">

• initial-scale=1 говорит о том, что размер страницы в браузере будет равен 100% величины области просмотра. То есть, соотношение между физическим пикселем и css пикселем будет 1:1;

• width=device-width говорит о том, что ширина страницы будет равна 100% ширины окна любого браузера. То есть, ширина страницы сайта соответствует ширине устройства, поэтому её не надо масштабировать.

 

🎓 «Контрольные» точки

Обычно «контрольные» точки имеют 4 варианта в зависимости от ширины экрана:

• 320px (375px) – 767px (мобильные устройства);

• 768px – 1023px (планшеты);

• 1024px – 1199px (десктопы);

• 1200px – … («большие» десктопы).

🎓 Медиа-запросы 

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

Медиа-запросы могут быть добавлены следующими способами:

• непосредственно в коде страницы:

<style>
    @media (max-width: 767px) { #sidebar {display: none;} }
</style> 

• внутри таблицы стилей main.css:

@media (max-width: 767px) { #sidebar {display: none;} }

🎓 Логические операторы

• оператор and связывает друг с другом разные условия:

@media screen and (max-width: 600px) {/* CSS-стили */;}

• оператор not позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком, т.е. запрос:

@media not all and (monochrome) {/* CSS-стили */;}

🎓 Тип носителя

Тип носителя представляет собой тип устройства, например, принтеры, экраны.

• all - подходит для всех типов устройств;

• print - предназначен для страничных материалов и документов просматриваемых на экране в режиме предварительного просмотра печати;

• screen - предназначен в первую очередь для экранов цветных компьютерных мониторов;

• speech - предназначен для синтезаторов речи.

🎓 Характеристики носителя

К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.

• width - проверяет ширину области просмотра. Значения задаются в единицах длины, px, em и т.д., например, (width: 800px). Обычно для проверки используются минимальные и максимальные значения ширины. min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width — ширина области просмотра меньше значения, указанного в запросе;

• height - проверяет высоту области просмотра. Значения задаются в единицах длины, px, em и т.д., например, (height: 500px). Обычно для проверки используются минимальные и максимальные значения высоты. min-height применяет правило если высота области просмотра больше значения, указанного в запросе, max-height — высота области просмотра которого меньше значения, указанного в запросе.