EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Medios en CSS
            Medios en CSS
            19/10/2019
            metaetiqueta viewport
            Configuración metaetiqueta viewport, web responsive
            20/10/2019

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

            Media queries

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

            Tabla de contenidos

            • Media queries en CSS
              • 1. Media queries para definir el ancho máximo de la pantalla
              • 2. Otras propiedades o condiciones
              • 3. Operadores lógicos en media queries
            • Ejercicios propuestos

            Media queries en CSS

            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.

            1. Media queries para definir el ancho máximo de la pantalla

            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";
                }
            }

            La siguiente media query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 450 y 800 píxeles:

            @media (min-width: 450px) and (max-width: 800px) { 
                  ... 
            }

            Ver ejemplo completo:

            0

            2. Otras propiedades o condiciones

            A parte del ancho hay muchas otras propiedades que se pueden comprobar para aplicar o no los 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

            3. Operadores lógicos en media queries

            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 (monochrome) { ... }

            Ejercicios propuestos

            Actividad 2

            Define las media queries de tu proyecto web. Aplica un mínimo de tres puntos de ruptura.

            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            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



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results