fbpx
León Desarrollo - Programación WordPress
Diseño gráfico

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 */
}
  1. 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 */
}
  1. 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 */
}
  1. Media Query para Pantallas Medianas (Laptops):
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  /* Estilos para pantallas medianas */
}
  1. Media Query para Pantallas Grandes (Monitores):
@media screen and (min-width: 1440px) {
  /* Estilos para pantallas grandes */
}
  1. 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) */
}
  1. Media Query para Impresión (Estilos de Impresión):
@media print {
  /* Estilos específicos para la impresión */
}
  1. 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 */
}
  1. 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.

Suscríbete

Si quieres estar al día con las novedades de este sitio te recomiendo que te suscribas.

Comentarios

Deja un comentario


2018 animaciones animación Aranda array atributos añade base de datos buscar categoría css curso diseño Duero emprendimiento fechas fiduero guía imagen imagenes inauguracion instalar Isilla linux local mac node.js pagina pagina web php post problemas producto red servicio servidor solución split sql sql server stock string windows woocommerce wordpress