EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Media queries CSS para cumplir las necesidades del diseño responsive

            Media queries

            Media-queries css para cumplir las necesidades del diseño responsive

            Las media queries se introdujeron en CSS3 para dar respuesta a las necesidades del diseño web responsive. Mediante ellas podemos definir estilos condicionales, aplicables únicamente en determinadas situaciones. El uso más extendido de las media queries es para establecer estilos diferentes para cada ancho de pantalla.

            Contenidos del artículo

            • 1. Media queries en CSS para cada ancho de pantalla
              • 1.1. Media query indicando el ancho mínimo de pantalla
              • 1.2. Media query indicando el ancho máximo de pantalla
              • 1.3. Media query combinando múltiples condiciones
            • 2. Ejemplos de Media queries para definir el ancho del dispositivo
              • 2.1. Otras propiedades o condiciones
              • 2.2. Operadores lógicos en media queries

            1. Media queries en CSS para cada ancho de pantalla

            Para definir una media query en CSS se utiliza la regla @media en la hoja de estilos. Se pueden definir todas las media queries que necesitemos según los diseños para cada ancho de pantalla.

            ¡Ojo! Como vimos en la unidad anterior, es necesario enlazar la hoja de estilo externa en el documento HTML.

            Para definir los estilos para cada ancho de pantalla utilizaremos puntos de ruptura. Todos los estilos que no se incluyan dentro de una media query se verán en todos los tamaños de dispositivo.

            Existen varias formas de definir el ancho del dispositivo dentro de la regla @media:

            1.1. Media query indicando el ancho mínimo de pantalla

            Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho mínimo de 768px (punto de ruptura de 768px).

            @media (min-width: 768px) {
              /* Estilos para pantallas con un ancho mínimo de 768px */
            }

            1.2. Media query indicando el ancho máximo de pantalla

            Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho máximo de 767px (punto de ruptura de 767px).

            @media (max-width: 767px) {
              /* Estilos para pantallas con un ancho máximo de 768px */
            }

            1.3. Media query combinando múltiples condiciones

            Es posible combinar múltiples condiciones en una media query para aplicar estilos solo cuando se cumplan todas las condiciones. Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho entre 768px y 1024px (puntos de ruptura de 768px y 1024px).

            @media (min-width: 768px) and (max-width: 1024px) {
              /* Estilos para pantallas con un ancho entre 768px y 1024px */
            }

            2. Ejemplos de Media queries para definir el ancho del dispositivo

            Ejemplo 1:

            Supongamos que queremos aplicar un estilo diferente en pantallas de ancho superior a 1024px, inferior a 1024px e inferior a 480px, tendríamos las siguientes media queries:

            .click:after {
                content:"En pantalla grande";
            }
            @media (max-width: 1024px) {
                .click:after {
                    content:"Tablet";
                }
            }
            @media (max-width: 480px) {
                .click:after {
                    content:"Movil";
                }
            }

            Ver ejemplo completo:

            0

            Ejemplo 2:

            La primera media query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 450 y 800 píxeles y la segunda media query para pantallas menores a 449 píxeles.

            .click:after {
                content:"En pantalla grande";
            }
            @media (min-width: 450px) and (max-width: 800px) { 
                   .click:after {
                    content:"Tablet";
                }
            }
            
            @media (max-width: 449px) {
                .click:after {
                    content:"Movil";
                }
            }

            Ver ejemplo completo:

            0

            2.1. Otras propiedades o condiciones

            Además del ancho hay muchas otras propiedades que se pueden utilizar para aplicar o no estilos. Las siguientes son algunas de ellas:

            NombreDescripción
            widthAnchura del viewport
            heightAltura del viewport
            aspect-ratioRelación de aspecto anchura-altura del viewport
            orientationOrientación del viewport
            resolutionDensidad de píxeles del dispositivo
            scanProceso de escaneo del dispositivo
            gridSi el dispositivo es grid o bitmap
            update-frequencyVelocidad de actualización del dispositivo para modificar la apariencia del contenido
            overflow-blockCómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloque
            overflow-inlineCómo maneja el dispositivo el contenido que excede los límites del eje inline
            colorComponente de número de bits por color del dispositivo, o cero si el dispositivo no es a color
            color-indexNúmero de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla
            monochromeBits por píxel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático
            hoverSi se puede posicionar el puntero sobre los elementos
            Tabla 1. Propiedades media queries

            2.2. Operadores lógicos en media queries

            Como hemos visto, las media queries nos permiten utilizar operadores lógicos para comprobar si se cumple una condición.

            Operador AND

            El siguiente código aplicará estilos cuando la pantalla tenga un ancho mínimo de 700px y la orientación de la misma sea horizontal (landscape).

            @media (min-width: 700px) and (orientation: landscape) { ... }

            Operador NOT

            El siguiente código aplicará estilos cuando no se cumpla la condición especificada, es decir a cualquier elemento que no sea una pantalla convencional ni sea monocromo.

            @media not screen and not (monochrome) { ... }

            Navegación de entradas

            ← Medios en CSS
            Flexbox, modelo de caja flexible en CSS →

            Tutorial CSS Nivel Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Flexbox, modelo de caja flexible
            • 5. CSS Grid para maquetar contenido con rejillas
            • 6. Centrar horizontal y verticalmente un elemento
            • 7. Preprocesadores Less y Sass
            • 8. Prácticas CSS
            • 9. Chuleta CSS Nivel avanzado

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados