crédito extra
Puedes hacer que tu estructura se vea aun mejor en dispositivos móviles usando meta viewport.
Estructura con CSS
"Responsive Design" (Diseño Responsivo) es la estrategia para hacer que un sitio "responda" al navegador y dispositivo en el que se muestra... haciendo que se vea increible pase lo que pase.
Los media queries son la herramienta más poderosa para hacer esto. Tomemos la estructura donde usamos porcentajes y transformémosla en una columna cuando la ventana del navegador es muy pequeña para mantener el menú en la barra lateral:
@media (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media (max-width:599px) {
nav li {
display: inline;
}
}¡Ahora, cuando modificas el tamaño de tu navegador tu estructura se ve mejor que nunca!
</section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>
Ahora, nuestra estructura se ve increíble en dispositivos móviles. Aquí están algunos sitios populares que usan media quieries del mismo modo. Hay muchas otras cosas además de min-width y max-width que puedes detectar: mira la documentación de Mozilla para aprender más.
Puedes hacer que tu estructura se vea aun mejor en dispositivos móviles usando meta viewport.
