O CSS3 introduziu algumas novas unidades assim como o pt e rem. Porém, hoje eu gostaria de falar sobre algumas que me chamaram muita atenção. São elas: vw e vh.
Muitas vezes, há certos elementos dentro do nosso projeto que gostaríamos de assegurar que pudessem se adaptar 100% em nossas viewports. Normalmente, usaríamos JavaScript para fazer isso. Verificar o tamanho da janela de exibição e, em seguida, redimensionar quaisquer elementos da página para se adequarem. Se o usuário redimensiona o navegador, em seguida, o script é executado novamente para redimensionar os elementos da página e assim por diante.
Com vw / vh, agora podemos dar um tamanho para que seja relativo ao tamanho da janela. As unidades vw / vh são interessantes pois uma unidade reflete 1/100 a largura da janela. Para fazer com que um elemento possua a largura da janela de exibição, por exemplo, você configura o mesmo para ter width: 100vw. Simples! Fácil!
Um bom uso dessas unidades poderia ser para conteúdos que ficam dentro de um fluxo normal do documento. Por exemplo, rolando alguma página, eu poderia incluir uma série de screenshots. Para estes screenshots, eu gostaria de impedir que eles ultrapassem a altura da janela. Neste caso, eu posso definir uma altura máxima em minhas imagens.
img { max-height:95vh; }
Neste caso, eu seto uma altura de 95 para dar ao elemento um pequeno espaço, uma espécie de respiro.
Muitas vezes, há certos elementos dentro do nosso projeto que gostaríamos de assegurar que pudessem se adaptar 100% em nossas viewports. Normalmente, usaríamos JavaScript para fazer isso. Verificar o tamanho da janela de exibição e, em seguida, redimensionar quaisquer elementos da página para se adequarem. Se o usuário redimensiona o navegador, em seguida, o script é executado novamente para redimensionar os elementos da página e assim por diante.
Com vw / vh, agora podemos dar um tamanho para que seja relativo ao tamanho da janela. As unidades vw / vh são interessantes pois uma unidade reflete 1/100 a largura da janela. Para fazer com que um elemento possua a largura da janela de exibição, por exemplo, você configura o mesmo para ter width: 100vw. Simples! Fácil!
Um bom uso dessas unidades poderia ser para conteúdos que ficam dentro de um fluxo normal do documento. Por exemplo, rolando alguma página, eu poderia incluir uma série de screenshots. Para estes screenshots, eu gostaria de impedir que eles ultrapassem a altura da janela. Neste caso, eu posso definir uma altura máxima em minhas imagens.
img { max-height:95vh; }
Neste caso, eu seto uma altura de 95 para dar ao elemento um pequeno espaço, uma espécie de respiro.
Muito legal!
ResponderExcluir