Ao ver este título, você pode pensar que há outro erro de digitação, design de altura responsivo? Você está falando sério? Porque o "web design responsivo" normalmente verifica navegadores em várias larguras e tamanhos de dispositivos. Geralmente ajustamos a capacidade de resposta horizontal reduzindo a largura, mas raramente vejo consideração da capacidade de resposta vertical reduzindo a altura do navegador. Neste momento, Zhimimi pode estar com uma leve oscilação no coração, com algumas dúvidas: Precisamos diminuir a altura do navegador? Sim, vamos continuar falando sobre isso.
Quando projetamos um site, não é bom fazer suposições sem confiar em dados reais. A responsabilidade dos testes horizontais e verticais também é muito importante.
Para um designer, uma suposição irracional é um dos fatores importantes que arruína o design de um site. Por exemplo, é incorreto presumir que os usuários devam navegar em um site usando toda a largura e altura da tela. Em vez disso, precisamos considerar o pior cenário possível.
Zhimi, você entende? A realidade é que nem todos os usuários usam os navegadores da maneira que esperamos. Acho que o site fica horrível quando abaixo a altura do navegador.
Redimensionar o navegador (verticalmente) não é a única maneira de alterar a altura da janela de visualização. Ao abrirmos o navegador DevTools, ele também ocupará a altura do navegador.
A área da seta na imagem acima representa a altura da janela de visualização atual. Para telas de laptop menores, veremos apenas uma pequena parte da página da web.
A verdadeira questão é: podemos melhorar a experiência do usuário quando a altura da janela de visualização é menor? Sim, é possível, vamos dar uma olhada.
Como designers e desenvolvedores, alguns de nós focamos apenas nas alterações de largura do design e ignoramos as alterações na altura da janela de visualização. Por exemplo, no desenvolvimento, a UI fornece variações de componentes específicos em diferentes larguras de janela de visualização. Mas e quanto às diferentes alturas da janela de visualização?
Na imagem acima, temos um menu de navegação que se ajusta de acordo com a altura da viewport. . Se o tamanho da janela de visualização for pequeno (por exemplo, iPhone 5), os itens de navegação aparecerão como uma grade de duas colunas. Essa forma de pensar é muitas vezes abandonada ou otimizada até que alguém diga que isso deveria ser feito.
Existem duas maneiras diferentes de atingir os requisitos acima em CSS:
Consultas de mídia verticaisUnidades de viewportZhimimi definitivamente sabe como usar consultas de mídia de largura em CSS.
@media (largura mínima: 700px) { .element { /* faça alguma coisa.. */ }}Menos comumente usada é a consulta de mídia vertical, que verifica a altura da janela de visualização.
@media (altura mínima: 500px) { .element { /* faça alguma coisa.. */ }}/* ou */@media (orientação: paisagem) { .element { /* faça alguma coisa.. */ }}O uso de unidades de janela de visualização pode ajudar a fornecer uma experiência melhor aos usuários. Por exemplo, controle o espaçamento vertical entre elementos com base na altura da janela de visualização.
.hero__title {margem inferior: calc(10px + 5vh);}
Conforme mostrado acima, para telas maiores (como iMac de 27 polegadas), a margem inferior ficará muito grande. Temos duas maneiras de resolver o problema das margens excessivas.
Consultas de mídiaFunção de comparação CSSA primeira forma (consultas de mídia) é mais suportada. Se a tela for grande, precisamos definir um valor máximo para a margem inferior.
@media (largura mínima: 2200px) { .hero__title {margem inferior: 40px }}Outro método é usar a função de comparação CSS clamp(). A função da função clamp() é retornar um intervalo de valores.
.hero__title {margem inferior: braçadeira (10px, 5vh, 40px);}Neste exemplo, há uma área de seção com seções para títulos e ilustrações, e a altura da seção é igual a 100% da altura da janela de visualização.
Tudo parece bem até que a altura da janela de visualização diminua. A altura da seção não será suficiente para acomodar as ilustrações e o conteúdo do texto. Portanto, ele irá se sobrepor a outras partes da página.
Observe como a ilustração se sobrepõe à seção abaixo. Isso acontece porque há espaço vertical suficiente. Dê uma olhada em HTML e 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 {altura: 100vh;}.hero__thumb {flex: 0 0 550px largura: 550px;}Aqui estão várias soluções para resolver esses problemas:
Defina um tamanho fixo (largura e altura) para a ilustração ao invés de apenas a largura, a falta de altura continuará trazendo esse problema. altura: 100vh somente se a altura da janela de visualização for maior que 700px (o valor da consulta de mídia pode variar dependendo do contexto).Podemos combinar os dois para obter uma solução mais poderosa.
.hero__thumb { largura: 400px; altura: 300px; object-fit: contém; /* Para evitar a compactação da imagem */}@media (min-height: 700px) { .hero { height: 100vh }Ok, agora concordamos que usar consultas de mídia verticais é melhor. Porém, usar 100vh é arriscado porque mesmo limitando o tamanho da ilustração, talvez não consigamos fazer o mesmo com o conteúdo do texto. Se o conteúdo do texto ficar mais longo, o mesmo problema ocorrerá novamente, veja a figura abaixo:
Para resolver este problema, podemos usar min-height em vez de height. Dessa forma, se o conteúdo ficar mais longo, a altura se expandirá e não se sobreporá.
@media (altura mínima: 700px) { .hero {altura mínima: 100vh }}Fixar o título durante a rolagem não é uma coisa ruim, no entanto, queremos ter certeza de fixar o título apenas quando o espaço vertical for bom o suficiente para que a experiência seja boa.
Este é um site sobre paisagens. Aqui podemos ver que quando a altura é muito pequena, a altura fixa vai ocupar muito espaço como um todo. Isso é realmente importante para os usuários? Na maioria dos casos, não é importante, porque o usuário médio não diminuirá o zoom para ver um site como este. Atualmente, se quisermos otimizar, podemos fazê-lo. A ideia é usar a consulta de mídia vertical para alterar o posicionamento fixo para posicionamento estático quando for considerado que a altura é menor que uma determinada altura.
@media (altura mínima: 700px) { .site-header { /* posição: fixa ou posição: fixa */ }}Percebi esse padrão na barra de navegação do Twitter.com. A ideia é combinar media queries verticais com o padrão Priority+.
Quando a altura da janela de visualização é redimensionada, os elementos menos importantes (marcadores e listas) são removidos e anexados ao menu Mais, o que é um bom caso de uso para consultas de mídia verticais.
.nav__item--secondary { display: none;}@media (min-height: 700px) { .nav__item--secondary { display: block }}Se o nosso site tiver uma barra lateral ou barra lateral, quando a altura da janela de visualização for pequena, podemos reduzir o espaçamento vertical entre alguns itens de navegação, o que também irá melhorar o design geral.
Sabemos que a caixa modal deve estar pelo menos centralizada horizontalmente. No entanto, às vezes também precisamos centralizá-lo verticalmente. Geralmente usamos a seguinte solução:
.modal__body {posição: esquerda absoluta: 50%; superior: 50%; transform(-50%, -50%);
Porém, há um problema quando o conteúdo fica longo, o modal vai preencher a tela verticalmente e o usuário não conseguirá rolar.
Existem vários motivos para esta situação:
A caixa modal não tem altura e o modal está centralizado verticalmente (isso fará com que o problema ocorra mais rapidamente)Aqui está o css reparado:
.modal__body {posição: absoluta esquerda: 50%; superior: 3rem; overflow-y: auto;}@media (altura mínima: 700px) { .modal__body { topo: 50%; transform: translate(-50%, -50%) }}Observe que usei altura mínima e altura máxima. min-height trata de manter a boa aparência do modal, mesmo que o conteúdo seja curto, max-height trata de limitar sua altura usando um valor específico em vez de adicionar uma altura fixa.
Ao projetar uma experiência, é melhor pensar em termos de largura e altura. Redimensionar o navegador verticalmente pode ser um pouco estranho, mas tem suas vantagens. Neste artigo, discutimos a importância dos testes verticais e como os conduzimos. Por fim, propomos alguns exemplos e casos de uso que esperamos que sejam úteis para os usuários do smartmi.
O texto acima é sobre o design de altura em páginas da web responsivas. Você precisa diminuir a altura do navegador? Para mais detalhes, preste atenção a outros artigos relacionados neste site!