logofom78

Plantillas para las Medias Queries

Última actualización: Nov 11 2021

Categoría: general

Del material del curso de Codo a codo 4.0 dejo este apunte que es de gran ayuda

Media Queries

Mobile first

Plantilla  mobile first, usado en los modernos frameworks CSS responsive
design, se basa en preparar primero la vista óptima para el móvil y 
utilizar las media queries para ir adaptando la maqueta a dispositivos 
mayores.

  • Pantallas muy pequeñas (móviles en portrait de menos de 576px) No hace falta media-query porque será nuestro diseño por defecto

  • Pantallas pequeñas (móviles en landscape de más de 576px)

@media (min-width: 576px) {}
  • Pantallas medianas (tablets de más de 768px)
@media (min-width: 768px) {}
  • Pantallas grandes (desktops de más de 992px)
@media (min-width: 992px) {}
  • Pantallas muy grandes (desktops de más de 1200px)
@media (min-width: 1200px) {}

Desktop first

Plantilla  desktop first, se basa en preparar primero la vista óptima 
para la PC y grandes pantallas e ir utilizando las media queries para 
ir adaptando la maqueta a dispositivos mas pequeños.

  • Pantallas muy grandes (desktops de más de 1200px de ancho) No hace falta media-query porque será nuestro diseño por defecto

  • Pantallas grandes (desktops de menos de 1200px)

@media (max-width: 1199.98px) {}
  • Pantallas medianas (tablets de menos de 992px)
@media (max-width: 991.98px) {}
  • Pantallas pequeñas (móviles en landscape de menos de 768px)
@media (max-width: 767.98px) {}
  • Pantallas muy pequeñas (móviles en portrait de menos de 576px)
@media (max-width: 575.98px) {}



Uso en React con Styled Components

Como lo implemento en React o NextJS con Styled Components, en un archivo llamado config.js o medias.js

/* Pantallas grandes (desktops de menos de 1200px) */
const screenBig = `@media (max-width: 1199.98px)`

/* Pantallas medianas (tablets de menos de 992px) */
const screenMiddle = `@media (max-width: 991.98px)`

/* Pantallas pequeñas (móviles en landscape de menos de 768px) */
const screenLittle = `@media (max-width: 767.98px)`

/* Pantallas muy pequeñas (móviles en portrait de menos de 576px) */
const screenVeryLittle = `@media (max-width: 575.98px)`

export const medias = {
    screenBig,
    screenMiddle,
    screenLittle,
    screenVeryLittle
}

luego desde el archivo que se necesita hacemos

import { medias } from "../config";
const { screenLittle, screenVeryLittle } = medias

y en el componente estilado con styled component:

${screenVeryLittle} {}