Neste artigo veremos como criar uma div com altura e largura da tela do usuário, sendo responsiva as mais diferentes telas com simples regras de CSS.
Fala programador(a), beleza? Bora aprender coisa nova?
Hoje responsividade é um assunto bem e alta, queremos sempre adaptar nossos sites e apps ao dispositivo do usuário
Surge então uma necessidade de fazer isso preenchendo a tela toda, ou seja, tendo uma div com largura e altura que se adapte a qualquer monitor
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Podemos fazer isso facilmente com CSS, apenas precisamos utilizar as propriedades height e width com valores especiais
Em vez de px, em, rem ou pt utilizaremos vh e vw
- vh: view height, ou seja, a altura da view (tela) do usuário;
- vw: view width, ou seja, a largura total da view (tela) do usuário;
Veja um exemplo:
.container {
height: 100vh;
width: 100vw;
}Neste exemplo, container terá 100% da altura e largura da tela do usuário
E isso significa preencher a tela por completo, e também concluir nosso objetivo
E é claro que podemos utilizar esses valores com outros números
Por exemplo: metade da tela 50vw
Isso irá funcionar também e você deve utilizar conforme sua necessidade
Conclusão
Neste artigo vimos uma forma de deixar uma div ou elemento de forma que se adapte com comprimento total da tela do usuário
Tanto em largura como em altura com o valor de propriedade vh (view height) e vw (view width)
Porém utilizando as conhecidas propriedades height e width, setando o valor 100vh e 100vw respectivamente
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube