От автора: термин «Адаптивная верстка» часто подразумевает под собой проверку браузера в области просмотра на разной ширине и различных по размерам устройств. Мы всегда тестируем браузер по горизонтали, уменьшая ширину, но я редко встречал какие-либо соображения по поводу тестирования по вертикали за счет уменьшения высоты окна браузера. В глубине души возникает вопрос: нужно ли нам уменьшать высоту окна браузера? Да, и я постараюсь убедить вас в этой статье.
Во время работы над реализацией веб-сайта, делать предположения, не полагаясь на реальные данные, не очень хорошо. Чрезвычайно важно брать на себя ответственность за тестирование как по горизонтали, так и по вертикали.
Зачем проверять высоту?
Это хороший вопрос. Перед тем как перейти к примерам и вариантам использования, я хочу проиллюстрировать один сценарий, чтобы вы могли получить представление о том, какие проблемы мы будем исследовать.
Для дизайнера неверное предположение является одним из факторов, которые играют жизненно важную роль в искажении дизайна веб-сайта. Например, предположение, что пользователь будет просматривать веб-сайт, используя всю ширину и высоту экрана, неверно. Вместо этого вам нужно учитывать самый худший вариант.
Вы видите, что я имею в виду? Реальность такова, что не все пользователи используют веб-браузеры так, как вы ожидаете. Я видел веб-сайты, которые плохо выглядят при уменьшении высоты окна браузера.
Инструменты разработчика браузера
Изменение размера браузера (по вертикали) — не единственный способ изменить высоту области просмотра. Когда вы открываете инструменты разработчика в браузере, они также занимают вертикальное пространство.
Это может нарушить дизайн или выявить проблемы, которые вы не учли. Поле со стрелкой на рисунке выше представляет текущую высоту области просмотра. Для небольших экранов ноутбуков вы увидите только малую часть веб-страницы.
Главный вопрос заключается в том, можем ли мы улучшить взаимодействие с пользователем при небольшой высоте области просмотра? Да, это возможно. На этом теории достаточно, давайте научимся мыслить вертикально в CSS.
Вертикальное мышление в CSS
Как дизайнеры и разработчики, некоторые из нас сосредотачиваются только на вариациях ширины дизайна, игнорируя важность тестирования высоты области просмотра. Например, вы работаете над дизайном страницы и указали, как конкретный компонент будет выглядеть при разной ширине области просмотра. Но как насчет разной высоты области просмотра?
На рисунке выше у нас есть меню навигации, которое настраивается в зависимости от высоты области просмотра. Элементы навигации отображаются на весь экран. Когда размер экрана меньше, размер шрифта и интервал уменьшаются. Если размер области просмотра небольшой (скажем, iPhone 5), элементы навигации будут отображаться в виде сетки из 2 столбцов. Подобный тип мышления часто отбрасывается, оставляя такие важные вещи либо полностью забытыми, либо их приходится переделывать, когда кто-то сообщает об ошибке в своем веб-браузере.
CSS может помочь нам в применении вышеизложенного, в основном используя два разных метода:
Вертикальные медиа-запросы;
Единицы окна просмотра.
Вертикальные медиа-запросы
Как вы уже знаете, мы можем использовать медиа-запросы ширины в CSS.
@media (min-width: 700px) { .element { /* do something.. */ }
}Реже используются вертикальные медиа-запросы, которые сверяются с высотой области просмотра.
@media (min-height: 500px) { .element { /* do something.. */ }
} /* or */ @media (orientation: landscape) { .element { /* do something.. */ }
}Единицы окна просмотра
Использование единиц окна просмотра может помочь улучшить взаимодействие с пользователем. Например, управление вертикальным интервалом между элементами на основе высоты области просмотра.
.hero__title { margin-bottom: calc(10px + 5vh);
}
Это все развлечения и игры, пока мы не рассмотрим приведенный выше пример на большом дисплее, таком как iMac 27″. Высота области просмотра будет слишком большой. К счастью, у нас есть два способа изменить слишком большой отступ (margin-bottom) внизу:
Медиа-запросы;
Функции сравнения CSS.
Первый способ (медиа-запросы), конечно, лучше поддерживается. Нам нужно установить максимальное значение, (margin-bottom) если размер экрана большой.
@media (min-width: 2200px) { .hero__title { margin-bottom: 40px; }
}Другой способ — использовать функцию сравнения CSS clamp(). По сути, нам нужно установить минимальный отступ 10px и максимальный в 50px. Промежуточный размер будет отображаться в браузере!
.hero__title { margin-bottom: clamp(10px, 5vh, 40px);
}В следующем разделе мы рассмотрим различные варианты использования вертикальных медиа-запросов CSS.
Случаи использования и примеры
Перекрывающееся содержимое
В этом примере мы видим представление, которое состоит из заголовка и иллюстраций. Высота страницы равна 100vh, что занимает 100% высоты области просмотра.
Все выглядит великолепно, пока высота окна просмотра не станет меньше. Высоты страницы будет недостаточно для размещения иллюстрации и текстового содержимого. В результате они будут перекрываться с другими разделами на странице.
Обратите внимание, как иллюстрация перекрывается с разделом под ней. Это происходит потому, что здесь недостаточно вертикального пространства. Давайте посмотрим на HTML и CSS.
<div class="hero"> <div class="hero__wrapper"> <div class="hero__content"><!-- content --></div> <img class="hero__thumb" src="figure.png" alt="" /> </div> </div>
.hero { height: 100vh;
} .hero__thumb { flex: 0 0 550px; width: 550px;
}Вот возможное решение этой проблемы:
Установите фиксированный размер (ширину и высоту) для иллюстрации вместо единственного параметра ширины width. Отсутствие высоты height усугубляет проблему.
Применяйте height: 100vh только в том случае, если высота области просмотра больше чем 700px (значение медиа-запроса может отличаться в зависимости от контекста).
Мы можем объединить и то, и другое для более эффективного решения.
.hero__thumb { width: 400px; height: 300px; object-fit: contain; /* To avoid compressing the image */
} @media (min-height: 700px) { .hero { height: 100vh; }
}Хорошо, теперь мы видим, что лучше использовать вертикальный медиа-запрос. Тем не менее, использовать 100vh рискованно, потому что даже если вы ограничите размер иллюстрации, вы не сможете сделать то же самое для текстового содержимого. Если текстовое содержимое стало длиннее, та же проблема повторится снова. Смотрите рисунок ниже.
Чтобы исправить это, мы можем использовать min-height вместо height. Таким образом, если контент станет длиннее, высота увеличится и перекрытия не будет.
@media (min-height: 700px) { .hero { min-height: 100vh; }
}Фиксированный заголовок
Неплохо сделать заголовок фиксированным при прокрутке, но вам нужно убедиться, что он фиксируется только в вертикальном пространстве.
Вот сайт в альбомном режиме. Обратите внимание, что заголовок занимает слишком много места по вертикали. Это действительно важно для пользователя? В большинстве случаев ответ отрицательный. Мы можем улучшить это с помощью вертикальных медиа-запросов:
@media (min-height: 700px) { .site-header { /* position: fixed or position: sticky */ }
}При этом заголовок не будет фиксироваться в альбомном режиме.
Скрытие менее важных элементов
Я заметил эту закономерность в навигации Twitter.com. Идея состоит в том, чтобы объединить вертикальные медиа-запросы и шаблон Priority +.
Когда высота области просмотра изменяется, менее важные элементы (закладки и списки) будут удалены и добавлены в меню «Еще». Это хороший вариант использования вертикальных медиа-запросов.
.nav__item--secondary { display: none;
} @media (min-height: 700px) { .nav__item--secondary { display: block; }
}Уменьшение интервала – меню навигации
Это связано с предыдущим примером. У нас есть вертикальное меню навигации (оно же боковая панель). Когда высота области просмотра мала, мы можем немного уменьшить вертикальное расстояние между элементами навигации, что немного улучшит общий дизайн.
.nav__item { padding-top: 4px; padding-bottom: 4px;
} @media (min-height: 700px) { .nav__item { padding-top: 10px; padding-bottom: 10px; }
}Кроме того, можно немного уменьшить размер шрифта. Таким образом, создается еще более вертикальное пространство.
Уменьшение интервала – главный раздел
Главному разделу нужны вертикальные отступы, чтобы он хорошо выделялся. Расстояние можно уменьшить в зависимости от высоты области просмотра.
.hero { padding-top: 24px; padding-bottom: 24px;
} @media (min-height: 700px) { .hero { padding-top: 40px; padding-bottom: 40px; }
}Модальное окно
Как вы, возможно, уже знаете, модальный компонент должен быть центрирован по крайней мере по горизонтали. Однако вам может потребоваться также центрирование модального окна по вертикали. Это возможно, но это чревато появлением ошибок при изменении содержимого. Каким образом? Это то, что мы собираемся исследовать.
С идеальным содержанием модальное окно выглядит так, как показано ниже. Изначально все выглядит хорошо.
.modal__body { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px;
}Однако, когда контент станет длиннее, все будет выглядеть беспорядочно. Модальное окно заполнит экран по вертикали, и пользователь не сможет его прокручивать.
Причина данной проблемы следующая:
у модального окна нет высоты;
модальное окно центрировано по вертикали (благодаря этому проблема возникает еще быстрее).
Вот обновленный CSS.
.modal__body { position: absolute; left: 50%; top: 3rem; transform: translateX(-50%); width: 500px; min-height: 200px; max-height: 500px; overflow-y: auto;
} @media (min-height: 700px) { .modal__body { top: 50%; transform: translate(-50%, -50%); }
}Обратите внимание, что я использовал min-height и max-height. Во-первых, модальное окно должно выглядеть хорошо, даже если содержимое короткое, а во вторых – нужно ограничивать его высоту определенным значением, а не добавлять фиксированную высоту.
Заключение
Во время разработки дизайна страницы, лучше думать о нем с точки зрения ширины и высоты. Изменение размера браузера по вертикали может показаться странным, но это того стоит. В данной статье я рассмотрел, насколько важно вертикальное тестирование и как мы можем это сделать. И, наконец, я предложил несколько примеров и вариантов использования. Я надеюсь, что вы сочли это полезным! Спасибо за чтение.
Автор: Ahmad Shadeed
Источник: ishadeed.com
Редакция: Команда webformyself.