Alguns desenvolvedores assim como eu, já começamos a utilizar, as novas medidas de largura (vw), e altura (vh). Tendo como base nossa experiência com layout responsivo utilizando porcentagem (%) como padrão, vemos algumas diferenças quando migramos para essa novidade.

As medidas em porcentagem contam sempre com elementos defaults do navegador em sua conta, como por exemplo a barra de rolagem.

Não entendeu nada? Calma…

Quando eu determino uma largura de 100% para um section por exemplo, estou dizendo ao navegador, que minha section, terá que ocupar todo o meu campo visual. Automaticamente, ele vai fazer isso, já tirando a largura utilizada pela barra de rolagem quando ela existir.

Pense que o navegador faz a seguinte conta. calc(100% – 12px). Os 12px é representado pela largura da barra de rolagem. Mas isso claro, é um tamanho qualquer, apenas para ilustrar nosso exemplo.

Agora vamos para a largura em VW…

No exemplo acima o navegador entende a largura e faz o cálculo. Agora quando vamos utilizar o vw, isso muda um pouco, pois o navegador ignora completamente o valor da barra de rolagem e com isso, cria um scroll horizontal, examente do tamanho da barra de rolagem.

Como resolver?

Eu mesmo, quebrei a cabeça tentando buscar alguma alternativa simples que poderia resolver esse meu problema de vez. Até encontrei algumas soluções na web, mas como sempre, quase nenhuma funcionou, e as que aparentemente dava certo, algo depois se quebrava ou do nada, se comportava de maneira estranha.

Por um acaso da vida, em um teste feito por mim, acabei declarando em meu reset o seguinte parâmetro.

**{max-width: 100%;}*

Acreditem ou não, foi a melhor solução até hoje.

Espero que esse post possa ajudar com problemas futuros, ao utilizar essas novas medidas.

Forte abraço.


264 0 0