Como hemos dicho en la introducción de este tema, como el objetivo es introducirte en la utilización de mediaqueries, enfocamos esta actividad como un '
salto sin motor desde un precipicio sin paracaidas ni libro de instrucciones'. Así, la mejor manera (aunque también la más dolorosa) de aprender a dominar un elemento es romperse la cabeza por varias partes contra ese mismo elemento un par de veces.
No obstante, a continuación se incluyen algunos consejos prácticos:
- Añade nuevos <div> en aquellos elementos que tienes que maquetar pero que, o están sin etiquetar, o bien comparten la misma caja con otro elemento que también tienes que maquetar por separado (como el caso de los 3 <article> o los dos elementos que hay dentro de cada <li> del <nav>).
- Para indicar las propiedades que impliquen medidas horizontales (width, margin, etc..) utiliza el porcentaje (%), al estilo: width:100%;
- Si deseas que una imagen se redimensione según las dimensiones (horizontales) que tenga el <div> donde se encuentra, utiliza el código css: img{ max-width:100%}
- Utiliza un mediaquerie para cada tipo de resolución o bien un mediaquerie para cada vez que la visualización "se rompe" al cambiar manualmente la anchura del navegador.
- Coloca los diferentes mediaqueries al final, justo antes de cerrar el </style>.
- Es muy importante que no te olvides de incluir el metadata name="viewport" con las propiedades correctas dentro del <head>
- Diferentes estudios han confirmado la extrema dureza del craneo humano, capaz de resistir fuerzas superiores cónicas y boreales de diversa consideración... la reiteración y la obstinación controlada son los mejores acompañantes en el aprendizaje.
