Media Queries de CSS

Para hacer un sitio web responsive, es esencial utilizar media queries de CSS para adaptar el diseño y los estilos de tu sitio a diferentes tamaños de pantalla y dispositivos. A continuación, te presento algunas de las media queries más utilizadas:

1. Media Query para Pantallas Pequeñas (Smartphones):

@media screen and (max-width: 767px) {
  /* Estilos para pantallas pequeñas */
}

2. Media Query para Tablets en posición vertical:

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* Estilos para tablets en posición vertical */
}

3. Media Query para Tablets en posición horizontal:

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  /* Estilos para tablets en posición horizontal */
}

4. Media Query para Pantallas Medianas (Laptops):

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  /* Estilos para pantallas medianas */
}

5. Media Query para Pantallas Grandes (Monitores):

@media screen and (min-width: 1440px) {
  /* Estilos para pantallas grandes */
}

6. Media Query para Pantallas Retina (Alta Resolución):

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Estilos para pantallas de alta resolución (Retina) */
}

7. Media Query para Impresión (Estilos de Impresión):

@media print {
  /* Estilos específicos para la impresión */
}

8. Media Query para Pantallas Pequeñas y Retrato (Retrato en Dispositivos Móviles):

@media screen and (max-width: 767px) and (orientation: portrait) {
  /* Estilos para pantallas pequeñas en modo retrato */
}

9. Media Query para Pantallas Pequeñas y Paisaje (Paisaje en Dispositivos Móviles):

@media screen and (max-width: 767px) and (orientation: landscape) {
  /* Estilos para pantallas pequeñas en modo paisaje */
}

Estas son algunas de las media queries de CSS más comunes que puedes utilizar para crear un diseño web responsive. Puedes personalizar estas media queries según las necesidades de tu proyecto y definir los estilos específicos para cada resolución o dispositivo. El diseño responsive implica más que solo estas media queries, también implica ajustar el diseño, tamaños de fuente, márgenes y otros estilos para garantizar una experiencia de usuario óptima en una variedad de dispositivos y tamaños de pantalla.