Spanish, Mexican subtitles

← De fijo a fluido

Get Embed Code
4 Languages

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

  1. Ahora que sabes cómo usar
    la meta para el viewport
  2. juguemos un poco
    con las herramientas de desarrollo
  3. para ver qué necesitamos hacer
    para arreglar esta página.
  4. Ahora bien, el mayor problema
    aquí es que la página
  5. tiene un ancho de columna fijo.
    Si yo reajusto el tamaño de la ventana,
  6. notarás que la columna de texto
    no cambia de tamaño,
  7. solo cambia su posición con respecto al margen.
    Al mirar los elementos
  8. en la herramientas de desarrollo, podemos
    encontrar fácilmente el primer elemento ofensivo.
  9. Este elemento de la página
    tiene un ancho de página fijo.
  10. Inhabilitémoslo y veamos qué pasa.
  11. Bueno, ciertamente ha cambiado
    las cosas, pero no creo que
  12. haya mejorado mucho el asunto.
    Sigamos investigando
  13. el contenido para ver qué encontramos.
  14. Este elemento de wrapper ya tiene
    un ancho del 100%, lo cual es bueno.
  15. Significa que no nos está impidiendo
  16. reajustar el tamaño. Pero el elemento
    de contenido tiene un ancho fijo en píxels.
  17. Inhabilitémoslo. Ahora,
    al reajustar el tamaño
  18. de la página, nuestro contenido no tiene
    problema, pero la barra lateral
  19. aparece y desaparece.
    Desde luego, tiene un ancho fijo.
  20. Si ajustamos su ancho a
    un porcentaje también,
  21. ahora podemos reajustar
    el tamaño de mejor forma.
  22. Volvamos a la página, e intentemos
  23. asignarle un ancho, pero
    démosle un ancho en
  24. unidades viewport esta vez.
    Nuestro único problema ahora
  25. parece ser que el encabezado
    no está reajustándose como
  26. quisiéramos, así que echémosle
    un vistazo a la imagen del encabezado
  27. una vez más. La imagen tiene
    un ancho máximo asignado,
  28. pero no un ancho en sí.
    Así que, fijemos su ancho.
  29. Y ahora, todo parece estar
    reajustándose bien. No es perfecto,
  30. pero todo lo que quería explicar
    es que al intentar transicionar
  31. páginas con diseño fijo a diseño fluido,
    las cosas básicas a las que hay que
  32. prestar atención, son los tamaños de píxeles
    fijos, y a la falta de reajuste con porcentajes.