
Ao trabalhar em um site, não é muito correto fazer certas suposições sem se basear em dados reais. Portanto, é muito importante assumir a responsabilidade de verificar sites em janelas de navegador de diferentes larguras e alturas.
Por que verificar páginas em janelas de navegador de alturas diferentes?
Boa pergunta. Antes de passar para exemplos e cenários de uso de tais verificações, gostaria de falar sobre os problemas que acontecem com sites que não estão adaptados para trabalhar em pontos de vista de diferentes alturas. Isso ajudará você a entender melhor o que está acontecendo a seguir.
Fazer suposições erradas sobre como um site será usado é um dos fatores mais importantes que afetam negativamente o trabalho de um web designer. Por exemplo, seria errado esperar que o site fosse usado maximizando o navegador para tela inteira. Em vez disso, você deve contar com o pior.

Suposições e realidade O que
está acima é uma ilustração de minhas palavras. Na realidade, nem todos os usuários trabalham com navegadores da maneira que o designer sugere. Eu mesmo já encontrei sites que ficam mal em janelas de navegador com altura reduzida.
Ferramentas de desenvolvedor de navegador
Redimensionar o navegador verticalmente não é a única maneira de afetar a altura da janela de visualização. Então, por exemplo, quando a barra de ferramentas do desenvolvedor é aberta, ela também tira um pouco do espaço vertical.

A barra de ferramentas do desenvolvedor ocupa parte da janela do navegador.
Abrir as ferramentas do desenvolvedor pode interromper o design do seu site ou lançar luz sobre problemas que ninguém esperava que aparecessem. A área destacada da imagem representa a altura atual da janela de visualização. Abrir as ferramentas do desenvolvedor enquanto visualiza o site em uma pequena tela de laptop resultará em apenas uma pequena área da página visível.
Vamos pensar em uma questão importante: "É possível melhorar a experiência do usuário no site enquanto o visualiza em uma pequena janela do navegador?" Posso dar uma resposta positiva a esta pergunta. Acho que a teoria é suficiente para nós. Vamos aprender uma abordagem "vertical" para estilizar páginas.
CSS "vertical"
Alguns designers e desenvolvedores se concentram na aparência da página, que aceita em janelas de larguras diferentes. Ao mesmo tempo, eles ofuscam o estudo do comportamento da página em janelas de diferentes alturas. E isso é muito importante. Por exemplo, alguém está trabalhando no design de uma página e recebeu instruções sobre como um determinado componente deve ser exibido em janelas de navegador de larguras diferentes. E as janelas de diferentes alturas?

Em um telefone grande, os elementos de navegação preenchem o espaço vertical disponível. Em um telefone médio, o tamanho e o espaçamento da fonte são reduzidos. Em um telefone pequeno, não há espaço vertical suficiente para exibir todos os elementos. Portanto, eles são colocados em 2 colunas.
Esta figura mostra um menu de navegação cuja aparência se ajusta à altura da janela de visualização. O objetivo do designer é que o cardápio ocupe todo o espaço disponível para ele. Em telas menores, o tamanho da fonte e o espaçamento entre os itens de menu diminuem. Se a tela do telefone for muito pequena (por exemplo, como no iPhone 5), os itens serão exibidos em duas colunas. Esses tipos de cenários de uso do site costumam ser esquecidos. Como resultado, os sites não se adaptam de forma alguma para funcionar em telas de diferentes alturas ou apenas as otimizam quando algum visitante do site relata um problema.
CSS pode nos ajudar a ajustar o site para diferentes alturas de viewport. Ou seja, estamos falando sobre duas técnicas principais:
- Consultas de mídia com base na altura da janela de visualização.
- A unidade de medida relacionada à janela de visualização.
Consultas de mídia que levam em consideração a altura da janela de visualização
Como você provavelmente já sabe, você pode usar consultas de mídia em CSS que levam em consideração a largura da janela de visualização:
@media (min-width: 700px) {
.element {
/* do something.. */
}
}
Mas as consultas de mídia que levam em consideração a altura das janelas do navegador são muito menos comuns:
@media (min-height: 500px) {
.element {
/* do something.. */
}
}
/* */
@media (orientation: landscape) {
.element {
/* do something.. */
}
}
Unidades de medida relacionadas à janela de visualização
O uso de unidades de medida relacionadas ao tamanho da janela de visualização pode ajudar a melhorar a experiência do usuário nos sites. Por exemplo, levando em consideração a altura da janela de visualização, você pode ajustar a distância vertical entre os elementos.
.hero__title {
margin-bottom: calc(10px + 5vh);
}

Quanto mais alta a janela do navegador, maior a distância entre os elementos.
Tudo isso pode parecer uma coisinha legal que realmente não afeta nada, mas apenas até você olhar para uma página semelhante em um grande monitor - como um iMac de 27 polegadas. Em seguida, verifica-se que a altura da janela de visualização é muito alta. Mas, felizmente, temos uma maneira de limitar o tamanho
margin-bottom
. Isso pode ser feito, por exemplo, das seguintes maneiras:
- Usando consultas de mídia.
- Usando funções de comparação CSS.
O primeiro método (consulta de mídia) certamente tem melhor suporte ao navegador. Sua essência é limitar o valor máximo
margin-bottom
nos casos em que a página é exibida em telas muito grandes.
@media (min-width: 2200px) {
.hero__title {
margin-bottom: 40px;
}
}
A segunda maneira é usar uma função CSS
clamp()
. Ao escolher os valores passados para esta função, nós, neste caso, definimos o tamanho mínimo de indentação igual a 10px
, o máximo - 50px
, e os valores entre estes dois dependem do tamanho da janela do navegador.
.hero__title {
margin-bottom: clamp(10px, 5vh, 40px);
}
Se você estiver interessado neste tópico, dê uma olhada em meus artigos sobre unidades de medida dependendo do tamanho da janela de visualização da página e sobre funções CSS .
A seguir, falaremos sobre as diferentes maneiras de usar consultas de mídia verticais.
Exemplos e cenários
▍ Elementos da página que se sobrepõem ao alterar a altura da janela do navegador
Este exemplo mostra uma página que possui um título e uma ilustração na seção superior. A altura desta parte da página é
100vh
igual a 100% da altura da janela de visualização.

O topo da página com uma altura de 100vh
Tudo parece muito bom, mas apenas até a altura da janela do navegador diminuir. A parte superior da página não é alta o suficiente para acomodar a ilustração e o texto. Como resultado, os elementos na parte superior da página se sobreporão ao conteúdo de outras seções da página.

Diminuir a altura da janela do navegador quebra o design.
Observe como as imagens se sobrepõem à seção da página abaixo do topo da página. Isso se deve ao fato de não possuírem espaço suficiente. Vamos dar uma olhada no código deste exemplo.
Aqui está a marcação:
<div class="hero">
<div class="hero__wrapper">
<div class="hero__content"><!-- content --></div>
<img class="hero__thumb" src="figure.png" alt="" />
</div>
</div>
Aqui estão os estilos:
.hero {
height: 100vh;
}
.hero__thumb {
flex: 0 0 550px;
width: 550px;
}
Vamos considerar várias opções para resolver esses problemas:
- Você pode dar à imagem dimensões fixas (propriedades
width
eheight
), não apenas sua largura (width
). A falta de bensheight
é uma das razões do nosso problema. - Você pode aplicar a propriedade à seção superior da página
height: 100vh
apenas se a altura da janela de visualização for maior700px
( é claro, os valores específicos usados na consulta de mídia irão variar dependendo da sua situação).
Você pode combinar essas duas abordagens e obter uma solução mais confiável para esses problemas:
.hero__thumb {
width: 400px;
height: 300px;
object-fit: contain; /* */
}
@media (min-height: 700px) {
.hero {
height: 100vh;
}
}
Portanto, decidimos que as consultas de mídia "verticais" são um mecanismo estável e útil. Mas usar um valor
100vh
é um negócio arriscado, porque mesmo que você possa limitar o tamanho da imagem, pode acontecer que o tamanho do texto não possa ser limitado. Por exemplo, se o texto na seção superior da página for mais longo, enfrentaremos uma nova variante do problema com o qual já estamos familiarizados.

O texto se sobrepõe a uma seção do site onde não deveria estar.
Para corrigir esse problema, você pode
height
usar uma propriedade emvez de umapropriedademin-height
. Com essa abordagem, se o conteúdo de uma seção for maior do que pode conter, seu tamanho aumentará e seu conteúdo não cobrirá a próxima seção.
@media (min-height: 700px) {
.hero {
min-height: 100vh;
}
}
▍ Título da página corrigido
Não há nada de errado com o título da página permanecer em um lugar durante a rolagem. Mas você precisa ter certeza de que este título tem uma posição fixa apenas se houver espaço vertical suficiente na tela.

Título fixo da página
Mostra o site sendo visualizado no modo paisagem. Observe que o título ocupa muito espaço vertical. É importante para o usuário? Na maioria dos casos, não. Mas você pode melhorar a experiência do usuário ao trabalhar com o site recorrendo à seguinte consulta de mídia:
@media (min-height: 700px) {
.site-header {
/* position: fixed position: sticky */
}
}
Com essa abordagem no modo paisagem, o título não será corrigido.
▍ Escondendo itens que são menos importantes do que outros
Percebi isso no menu de navegação do Twitter. Ou seja, estamos falando sobre uma combinação de consultas de mídia "verticais" e o padrão Prioridade + .

Os itens selecionados serão ocultados se ficarem sem espaço.
Quando a altura da janela de visualização muda, os itens menos importantes (itens de menu
Bookmarks
eLists
) tornam-se subitensMore
. Este é um bom exemplo do uso de consultas de mídia "verticais".
.nav__item--secondary {
display: none;
}
@media (min-height: 700px) {
.nav__item--secondary {
display: block;
}
}
E aqui está meu tweet, que analisa a aplicação dessa abordagem no Twitter.
▍Navegação e alteração da altura da janela de visualização
O próximo exemplo está relacionado ao anterior. Existe uma barra de navegação vertical (barra lateral, barra lateral). Se a altura da janela de visualização for baixa, você pode reduzir ligeiramente a distância vertical entre os elementos de navegação, o que melhorará um pouco a aparência da página.

Espaçamento entre os elementos e a altura da janela de visualização
Aqui estão os estilos para este exemplo:
.nav__item {
padding-top: 4px;
padding-bottom: 4px;
}
@media (min-height: 700px) {
.nav__item {
padding-top: 10px;
padding-bottom: 10px;
}
}
E aqui você pode assistir a um vídeo sobre isso.
Além disso, pode-se notar que em tal situação, o tamanho da fonte também pode ser alterado, o que, ao diminuir a altura da janela do navegador, dará ainda mais espaço para os elementos.
▍ Seção superior da página e altura da janela de visualização
A seção superior da página precisa de algum espaço vertical livre para dar um pouco de "ar". As dimensões deste espaço podem depender da altura da janela de visualização.

Quanto mais alta a página, mais "ar".
Esta é a aparência dos estilos para este exemplo:
.hero {
padding-top: 24px;
padding-bottom: 24px;
}
@media (min-height: 700px) {
.hero {
padding-top: 40px;
padding-bottom: 40px;
}
}
▍Componentes modais
Como você já deve saber, espera-se que os componentes modais sejam pelo menos centrados horizontalmente. Mas pode ser necessário alinhar esse elemento verticalmente. Isso é possível, mas impede a alteração da quantidade de dados gerados por esses elementos.
Se o modal contém a quantidade correta de dados, ele parece muito bom, conforme mostrado abaixo.

Elemento modal correto
Aqui estão os estilos para este elemento:
.modal__body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 500px;
}
Mas se mais texto precisar ser exibido no mesmo elemento, nem tudo ficará tão bom. Ou seja, o elemento preencherá a tela verticalmente e o usuário não será capaz de percorrer seu conteúdo.

Elemento modal muito alto
Esse problema ocorre pelos seguintes motivos:
- O modal não tem altura especificada.
- O elemento é centralizado verticalmente (isso vai acelerar o problema).
Aqui está o CSS que aborda esses problemas:
.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%);
}
}
Observe que as propriedades
min-height
e são usadas aqui min-width
. A primeira é fazer com que o elemento tenha uma boa aparência, mesmo quando exibe um texto curto. E o segundo permite que você limite sua altura a um determinado valor em vez de dar a ele uma altura constante.

Elemento modal adequado para exibir textos longos
Resultado
Ao projetar sites, levando em consideração as impressões que os usuários obterão ao trabalhar com eles, é melhor criar seu design com base na largura e altura da janela do navegador. Pode parecer estranho para alguém testar páginas em janelas de alturas diferentes, mas esse teste se justifica. Aqui, falei sobre a importância de uma abordagem "vertical" para o design do site, como projetar as páginas para exibi-las corretamente em janelas de exibição de diferentes alturas e observei exemplos. Espero que você ache tudo isso útil.
Você está prestando atenção na aparência das páginas da web que cria em janelas de navegador de diferentes alturas?

