Al diseñar un sitio web receptivo, el desarrollador web desea alterar la estructura del diseño web en función del dispositivo que lo usa. CSS permite a sus usuarios realizar esta tarea utilizando la regla @Media que utiliza consultas de medios para cambiar la apariencia de un sitio web correspondiente al tipo de dispositivo. Para comprender qué es esta regla, lea la siguiente publicación. Los sujetos destacados en la publicación son los siguientes.

1. @Media Regla
2. Sintaxis de la regla @Media
3. Tipos de medios CSS
4. Tipos de características de medios

@Media Regla

Con el fin de alterar la apariencia de una página web basada en el dispositivo, o en los medios que lo muestran, se utiliza la regla @Media. Esta regla hace uso de las consultas de los medios para realizar la tarea antes mencionada. Esta regla demuestra ser de gran utilidad al desarrollar un sitio web receptivo.

Sintaxis de la regla @Media

Tiene la siguiente sintaxis.

Palabras clave explicadas

no: Invierte la semántica de una consulta de medios.

solo: Evita que las versiones antiguas de un navegador implementen la consulta de medios.

y: Combina un tipo de medios con una determinada función de medios.

Tipos de medios CSS

Hay un total de cuatro tipos de medios que hemos proporcionado a continuación.

todo

Es aplicable para todo tipo de dispositivos de medios.

imprimir

Esta consulta se usa específicamente para impresoras.

pantalla

Se utiliza para pantallas de varios tipos de dispositivos, como computadoras, computadoras portátiles, teléfonos móviles, etc.

discurso

Esta consulta se usa particularmente para lectores de pantalla.

Tipos de características de medios

Hemos descrito algunas de las características de los medios aquí.

1. de cualquier

Esta característica se incluyó en las consultas de medios Nivel 4 y especifica que si algún mecanismo de entrada dado permite que el usuario se desplace sobre los elementos.

cualquier momento

Esto también se incluyó en las consultas de medios de nivel 4 y establece que si algún mecanismo de entrada dado es un dispositivo de señalización y, de ser así, cuán preciso es?

relación de aspecto

Esta característica define la relación entre el ancho de la ventana gráfica y su altura.

color

Esta característica especifica los componentes de los colores de los dispositivos de salida.

columna de color

Esto define el rango de colores que serán compatibles con los dispositivos de salida.

Indice de color

Establece el número de colores que puede mostrar un dispositivo determinado.

red

El tamaño de columnas y filas se especifica por la función de la cuadrícula.

altura

Esto define la altura de la ventana gráfica.

flotar

Para permitir que los usuarios se ciernen sobre los elementos HTML, se utiliza la función Hover.

colorantes invertidos

Esto especifica si el dispositivo de salida invertida o no.

nivel de luz

Como su nombre indica, define el nivel de luz.

Max-Aspect-Ratio

La relación máxima de ancho y altura se especifica mediante esta característica.

color máximo

La mayor cantidad de bits por unidades de color de los dispositivos de salida se afirma con esta característica.

índice máximo

Esta característica establece los colores máximos que puede mostrar un dispositivo.

Altura máxima

Esta característica define la altura máxima del navegador.

max-monocromo

Esta característica se afirma la mayor cantidad de bits por color de una herramienta monocromática.

resolución mínima

La resolución mínima del dispositivo de salida se especifica por la función de resolución mínima.

mínimo

Esta característica define el ancho mínimo del navegador.

monocromo

Esta característica establece el número máximo de bits por componente de color de un dispositivo monocromático.

orientación

Define si la orientación de la ventana gráfica es retrato o paisaje.

bloque de desbordamiento

Maneja los escenarios en los que el contenido de la página web se desborda la ventana gráfica.

en línea de desbordamiento

Maneja los escenarios en los que se desplazará el contenido de la página web que se desplaza a través del eje en línea.

puntero

Un mecanismo de entrada fundamental para dispositivos de puntería.

resolución

Establece la resolución del dispositivo (en DPI o DPCM)

escanear

Escanea los dispositivos de salida.

scripting

Comprueba si alguna secuencia de comandos como JavaScript está disponible o no.

actualizar

Actualiza los dispositivos de salida rápidamente.

ancho

El ancho de la ventana gráfica se define por esta característica.

A continuación le hemos presentado un ejemplo para que pueda entender la regla @Media de una mejor manera.

Ejemplo

El siguiente ejemplo demuestra la regla @media.

Html

Regla css @media

Con el fin de alterar la apariencia de una página web basada en el dispositivo, o en los medios que lo muestran, se utiliza la regla @Media. Esta regla hace uso de las consultas de los medios para realizar la tarea antes mencionada. Esta regla demuestra ser de gran utilidad al desarrollar un sitio web receptivo.

Aquí hemos definido dos elementos que son

y

. Aplicaremos algunas reglas de los medios sobre estos elementos.

CSS

H1, P
Font-Family: 'Times New Roman', Times, serif;
tamaño de fuente: 16px;
estilo de fuente: normal;

@Media Screen y (Min-Width: 720px)
pag
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;
tamaño de fuente: 25px;
estilo de fuente: cursiva;

En el código anterior, hemos especificado que tanto el encabezado como el párrafo tendrán una familia de fuentes Verdana, un tamaño de fuente de 25px y un estilo de fuente en cursiva si el ancho de pantalla mínimo del dispositivo es de 720 px o más ancho. Sin embargo, si el ancho de la pantalla es inferior a 720px, entonces la familia de fuentes será tiempos de nuevo romano, tamaño de fuente 16px y estilo de fuente normal.

Producción

Cuando el ancho de la pantalla es de 720 px o más amplio.

Cuando el ancho de la pantalla es inferior a 720px.

La regla de @media se implementó con éxito.

Conclusión

La regla de @Media se utiliza para alterar la apariencia de una página web basada en el dispositivo o los medios que lo muestran. La sintaxis de la regla establece que el tipo de medio debe definirse junto con ciertas características de los medios y hacer uso de algunos operadores. Además, hay cuatro tipos que son; todos, pantalla, impresión y discurso. Además, hay muchas características de medios como ancho, monocromo, altura, bloqueo de desbordamiento, etc. Esta publicación explica profundamente la regla @media, junto con su sintaxis, tipos de medios y características de medios.