Responsive design: Media Queries
Responsive design es un patrón de diseño web estándar en la industria. A través de estas prácticas, lograremos que los productos que estamos desarrollando para la web puedan funcionar en cualquier plataforma. Es decir, pueda ser visualizado en cualquier dispositivo.
El objetivo principal de responsive design es que nuestro producto pueda ser perfectamente visualizado desde un dispositivo móvil, una Tablet y finalmente una laptop o desktop.
Elementos para trabajar con responsive design
- Media Queries: La declaración CSS que contiene las propiedades que se aplican a las nuevas dimensiones de tamaño de pantalla
- Break points: Son el punto de quiebre en el ancho de pantalla donde vas a aplicar un cambio. Es decir, es el tamaño de referencia donde se aplican las características de dimensiones que se deben aplicar para el tamaño de ancho de pantalla específico. Es también, el punto en el que puedes reposicionar elementos o cambiar sus dimensiones y ajustarlos al nuevo ancho
Ejemplo
Mobile first / only
@media (min-width: 480px) {…}@media (min-width: 768px) {…}@media (min-width: 1024px) {…}@media. Es el element CSS que encapsula todas las propiedades desde el min-width: nnpx
Min-width: nnpx. Es el break point, es decir, es el lugar en el ancho de pantalla de referencia donde se aplicarán los estilos encapsulados.
La mejor práctica es realizar diseños desde un dispositivo móvil hacia arriba. La manera correcta de aplicar media queries es desde las pantallas más chicas hasta las pantallas más grandes.
La mejor práctica es ir invocando en el head los estilos CSS de cada tamaño de pantalla. Puede ser: el primer estilo CSS invocado, puede ser el documento de estilos para dispositivos móviles como celulares, el segundo para tablets y el tercero para laptops y desktops.
Ejemplo
<link rel="stylesheet" href="style.css"><link rel="stylesheet" href="tablets.css" media="screen and (min-width: 768px)"><link rel="stylesheet" href="laptops.css" media="screen and (min-width: 1024px)">
