Olá, tudo bem? Sabe aquela coisa chata de quando você coloca um min-height: 100vh
no seu body e no mobile ele fica com um scroll sem nenhum motivo aparente? Realmente é uma coisa bem irritante e que antigamente era complicada de ser resolvida sem uma certa "gambiarra". Mas vamos começar do começo!
Para caso não saiba, o "vh" do css é uma unidade relativa a 1% do viewport do usuário, porém essa viewport inclui todo o navegador, desconsiderando por exemplo elementos que possam estar cobrindo a tela (como é o caso de celulares)
Por isso funciona no desktop, mas em mobile deixa um scroll!
Já a medida "svh" é o equivalente a "small viewport height", ou seja 1% do menor viewport considerando justamente os elementos que possam cobrir a tela como a barra de endereços do mobile.
Ou seja, perfeito pra celulares pois é muito mais preciso para o que o usuário vê!
Já o "lvh" (large viewport height) é o exato oposto, ele pega o maior viewport possível, desconsiderando a barra de endereços ou uma UI que possa estar cobrindo a tela.
Para desktop ele funciona muito bem como pode imaginar, mas pra mobile depende do seu caso de uso. 🤔
Afinal, um é bom pra desktop e outro bom pra celular, eu teria que usar uma media query pra adaptar então??
Não :D
Felizmente também existe o "dvh" (dynamic viewport height) que se ajusta de acordo com o dispositivo, agindo tanto como svh ou dvh de acordo com o necessário.
Entretanto alegria de pobre dura pouco, e eles ainda não estão disponíveis em todos os navegadores :(
O firefox e IE por exemplo ainda não possuem suporte...
Por isso, eu recomendo usar porém junto de um fallback! Se liga na dica:
body {
/*
primeiro você usa o fallback: vh
*/
min-height: 100vh;
/*
e em seguida, você usa a versão nova!
pois caso ela não funcione, será ignorada e
o vh informado anteriormente será usado no lugar
*/
min-height: 100dvh;
}
São propriedades super úteis e hoje em dia uma mão na roda pra evitar bugs de UI desnecessários :)
E é isso, espero que tu tenha aprendido algo novo hoje!
Obrigado por ler, boa sorte no css e até mais! :)
Top comments (0)