Когда вы видите этот заголовок, вы можете подумать, что это еще одна опечатка, адаптивный дизайн по высоте? Ты серьезно? Потому что «адаптивный веб-дизайн» обычно проверяет браузеры на разных значениях ширины и размерах устройств. Обычно мы регулируем горизонтальную отзывчивость, уменьшая ширину, но я редко вижу возможность вертикальной отзывчивости за счет уменьшения высоты браузера. В это время у Чимими может возникнуть небольшое колебание в сердце, и у него возникнут вопросы: нужно ли нам уменьшить высоту браузера? Да, давайте продолжим об этом.
Когда мы разрабатываем веб-сайт, не стоит делать предположения, не полагаясь на фактические данные. Ответственность за горизонтальное и вертикальное тестирование также очень важна.
Для дизайнера необоснованное предположение — один из важных факторов, портящих дизайн сайта. Например, неверно предполагать, что пользователи должны просматривать веб-сайт, используя всю ширину и высоту экрана. Вместо этого нам нужно рассмотреть худший сценарий.
Чими, ты понимаешь? Реальность такова, что не все пользователи используют браузеры так, как мы от них ожидаем. Я обнаружил, что веб-сайт выглядит ужасно, когда я уменьшаю высоту браузера.
Изменение размера браузера (по вертикали) — не единственный способ изменить высоту области просмотра. Когда мы открываем DevTools браузера, он также будет занимать высоту браузера.
Область стрелки на изображении выше представляет высоту текущего окна просмотра. На небольших экранах ноутбуков мы увидим только небольшую часть веб-страницы.
Реальный вопрос заключается в следующем: можем ли мы улучшить взаимодействие с пользователем, если высота области просмотра будет меньше? Да, это возможно, давайте посмотрим.
Как дизайнеры и разработчики, некоторые из нас сосредотачиваются только на изменении ширины дизайна и игнорируют изменения высоты области просмотра. Например, при разработке пользовательский интерфейс предоставляет варианты конкретных компонентов в зависимости от ширины области просмотра. А как насчет разной высоты области просмотра?
На изображении выше у нас есть меню навигации, которое регулируется в зависимости от высоты области просмотра. . Если размер области просмотра небольшой (например, iPhone 5), элементы навигации будут отображаться в виде сетки из двух столбцов. От этого образа мышления часто отказываются или оптимизируют, пока кто-то не скажет, что это следует сделать.
Существует два разных способа достижения вышеуказанных требований в CSS:
Вертикальные медиа-запросы Единицы просмотраЧимими определенно знает, как использовать медиа-запросы ширины в CSS.
@media (минимальная ширина: 700 пикселей) { .element { /* сделай что-нибудь.. */ }}Реже используется вертикальный медиа-запрос, который проверяет высоту области просмотра.
@media (min-height: 500px) { .element { /* сделать что-нибудь.. */ }}/* или */@media (ориентация: альбомная) { .element { /* сделать что-нибудь.. */ }}Использование единиц просмотра может помочь улучшить взаимодействие с пользователями. Например, управляйте вертикальным расстоянием между элементами в зависимости от высоты области просмотра.
.hero__title {margin-bottom: Calc(10px + 5vh);}
Как показано выше, для больших экранов (например, iMac 27 дюймов) нижнее поле станет очень большим. У нас есть два пути решения проблемы чрезмерной маржи.
Медиа-запросыФункция сравнения CSSПервый способ (медиа-запросы) более поддерживается. Если экран большой, нам нужно установить максимальное значение нижнего поля.
@media (минимальная ширина: 2200 пикселей) { .hero__title { поля-дна: 40 пикселей }};Другой метод — использовать функцию сравнения CSS clip(). Функция зажима() — возвращать диапазон значений.
.hero__title {margin-bottom: зажим(10px, 5vh, 40px);}В этом примере есть область раздела с разделами для заголовков и иллюстраций, а высота раздела равна 100% высоты области просмотра.
Все выглядит нормально, пока высота области просмотра не уменьшится. Высоты раздела будет недостаточно для размещения иллюстраций и текстового контента. Поэтому он будет перекрывать другие части страницы.
Обратите внимание, как иллюстрация перекрывает раздел ниже. Это происходит потому, что достаточно вертикального пространства. Взгляните на HTML и CSS.
<p class="hero"> <p class="hero__wrapper"> <p class="hero__content"><!-- content --></p> <img class="hero__thumb" src="figure.png" alt="" /> </p></p>CSS
.hero { высота: 100vh;}.hero__thumb { flex: 0 0 550 пикселей; ширина: 550 пикселей;}Вот несколько решений для решения таких проблем:
Установите фиксированный размер (ширину и высоту) для иллюстрации, а не только ширину, из-за отсутствия высоты эта проблема по-прежнему будет возникать. высота: 100vh, только если высота области просмотра превышает 700 пикселей (значение медиа-запроса может варьироваться в зависимости от контекста).Мы можем объединить их, чтобы получить более мощное решение.
.hero__thumb { width: 400px; height: 300px; object-fit: contains; /* Чтобы избежать сжатия изображения */@media (min-height: 700px) { .hero { height: 100vh }Хорошо, теперь мы согласны с тем, что лучше использовать вертикальные медиа-запросы. Однако использование 100vh рискованно, поскольку даже если мы ограничим размер иллюстрации, мы не сможем сделать то же самое с текстовым содержимым. Если текстовое содержимое станет длиннее, та же проблема возникнет снова, см. рисунок ниже:
Чтобы решить эту проблему, мы можем использовать минимальную высоту вместо высоты. Таким образом, если контент становится длиннее, высота будет увеличиваться, а не перекрываться.
@media (минимальная высота: 700 пикселей) { .hero { минимальная высота: 100vh }}Закрепление заголовка во время прокрутки — неплохая вещь, однако мы хотим убедиться, что мы закрепляем заголовок только тогда, когда вертикальное пространство достаточно хорошее, чтобы впечатление было хорошим.
Это сайт о пейзажах. Здесь мы видим, что при слишком маленькой высоте фиксированная высота в целом будет занимать много места. Действительно ли это важно для пользователей? В большинстве случаев это не важно, потому что средний пользователь не будет уменьшать масштаб, чтобы увидеть такой веб-сайт. В настоящее время, если мы хотим оптимизировать, мы можем это сделать. Идея состоит в том, чтобы использовать вертикальный медиа-запрос для изменения фиксированного позиционирования на статическое, когда считается, что высота меньше определенной высоты.
@media (min-height: 700px) { .site-header { /* позиция: фиксированная или позиция: прикрепленная */ }}Я заметил этот шаблон на панели навигации Twitter.com. Идея состоит в том, чтобы объединить вертикальные медиа-запросы с шаблоном Priority+.
При изменении размера области просмотра менее важные элементы (закладки и списки) удаляются и добавляются в меню «Дополнительно», что является хорошим вариантом использования для вертикальных медиа-запросов.
.nav__item--вторичный { display: none;}@media (min-height: 700px) { .nav__item--вторичный { display: блок }}Если на нашем сайте есть боковая панель или боковая панель, то при небольшой высоте области просмотра мы можем уменьшить вертикальное расстояние между некоторыми элементами навигации, что также улучшит общий дизайн.
Мы знаем, что модальное окно должно быть центрировано как минимум по горизонтали. Однако иногда нам также необходимо центрировать его по вертикали. Обычно мы используем следующее решение:
.modal__body {позиция: абсолютная; слева: 50%; сверху: 50%; преобразование: трансляция (-50%, -50%); ширина: 500 пикселей;}
Однако возникает проблема: когда контент становится длинным, модальное окно заполняет экран вертикально, и пользователь не сможет его прокручивать.
Причин такой ситуации несколько:
Модальное окно не имеет высоты, а модальное окно центрировано по вертикали (это приведет к более быстрому возникновению проблемы).Вот восстановленный CSS:
.modal__body {позиция: абсолютная; слева: 50%; верх: 3rem; ширина: 500 пикселей; максимальная высота: 500 пикселей;} @media; (минимальная высота: 700 пикселей) { .modal__body { top: 50%; Transform: Translate(-50%, -50%) }};Обратите внимание, что я использовал минимальную и максимальную высоту. Min-height предназначен для того, чтобы модальное окно выглядело хорошо, даже если контент короткий, а max-height — для ограничения его высоты с использованием определенного значения вместо добавления фиксированной высоты.
При проектировании опыта лучше всего думать о ширине и высоте. Изменение размера браузера по вертикали может показаться немного странным, но у него есть свои преимущества. В этой статье мы обсуждаем важность вертикального тестирования и способы его проведения. Наконец, мы предлагаем несколько примеров и вариантов использования, которые, как мы надеемся, будут полезны пользователям Smartmi.
Выше речь идет о дизайне высоты на адаптивных веб-страницах. Вам нужно уменьшить высоту браузера? Для получения более подробной информации, пожалуйста, обратите внимание на другие статьи по теме на этом сайте!