Portuguese, Brazilian subtitles

← Mantendo tudo fluido

Get Embed Code
4 Languages

Showing Revision 13 created 03/09/2014 by Fran Ontanaya.

  1. Agora que você sabe
    como definir o meta viewport
  2. vamos fuçar nas ferramentas de
    desenvolvimento
  3. para ver o que precisamos fazer
    para arrumar essa página.
  4. Agora, o maior problema aqui
    é que a página tem
  5. uma largura fixa de coluna.
    Se eu redimensiono a janela, você percebe
  6. que a coluna de texto não muda de tamanho,
    apenas a posição da margem.
  7. Ao passar o mouse pelos elementos
    dentro do DevTools
  8. podemos achar facilmente
    o primeiro elemento indesejado.
  9. Esse elemento de página
    tem uma largura definida.
  10. Vamos desabilitá-la e ver o que acontece.
  11. Bem, isso com certeza
    mudou algumas coisas
  12. mas não acho que melhorou muito.
  13. Vamos continuar nos aprofundando
    no conteúdo e ver o que podemos encontrar.
  14. Esse elemento wrapper
    já tem uma largura de 100%
  15. o que é bom, pois significa que
    não nos impede de redimensionar
  16. mas esse elemento content
    tem uma largura definida em pixels.
  17. Vamos desabilitá-la.
  18. Agora, quando redimensionamos a página
  19. nosso conteúdo está bom, mas a barra lateral
    está aparecendo e desaparecendo.
  20. Com certeza, ela tem uma largura definida.
  21. Se definimos sua largura como
    uma porcentagem também
  22. agora redimensionamos um pouco melhor.
  23. Então vamos voltar para a página,
    e vamos tentar atribuir-lhe uma largura
  24. mas vamos atribuir uma largura
    em unidades de viewport.
  25. Agora, nosso único problema remanescente
  26. parece ser que o cabeçalho
    não está redimensionando
  27. como gostaríamos.
    Vamos dar uma olhada
  28. na imagem de cabeçalho de novo.
    A imagem tem uma largura máxima definida
  29. mas não a largura em si.
    Então, vamos definir sua largura.
  30. E agora, tudo parece redimensionar bem.
    Agora, isso não está perfeito
  31. mas tudo o que eu queria destacar
  32. era que, ao tentar fazer a transição de páginas,
    do layout fixo para o flexível
  33. as coisas mais importantes para verificar,
    são tamanhos fixados em pixels
  34. e falta de porcentagem
    de redimensionamento.