Min-Width y Max-Width en consultas de medios | Explicado

Un sitio web receptivo se conoce como un sitio web dinámico que altera su estructura de acuerdo con el dispositivo en el que se muestra en el que se muestra. Puede cambiar su comportamiento según el ancho de la pantalla, la resolución de la pantalla, la orientación, etc. del dispositivo. Ahora para hacer un sitio web de este tipo, los desarrolladores utilizan consultas de medios. Aquí en este artículo, los temas discutidos son los siguientes.

1. Consulta de medios
2. Puntos de interrupción de CSS
3. Mínimo
4. Anchura máxima
5. Combinando ambos
6. Cuándo usar cuál: mínimo-oso o máximo ancho

Consulta de medios

Las consultas de los medios se introdujeron en CSS versión 3 que permite a sus usuarios crear sitios web receptivos mediante el uso de la regla @Media. Esta regla requiere que indique el tipo de medios, como la impresión, la pantalla, el habla o todo el tiempo con algunas expresiones lógicas que especifican ciertas características de los medios como ancho, resolución, densidad, etc.

Estas consultas básicamente permiten la alteración del diseño web dependiendo del tipo de dispositivo, como escritorio, computadora portátil, móvil, etc. Aquí le hemos mostrado cómo definir una consulta de medios.

Sintaxis

@Media Screen y (Min-Width: 420px) y (Max-Width: 650px)
@regla
tipo de medio
característica de medios
característica de medios
operador
operador

Una consulta de medios siempre comienza con la regla @Media y requiere que especifique el tipo de medios en el que se aplicará la consulta. Luego, debe indicar el tipo de medios de pantalla y usar operadores como 'y' para combinar características de los medios como Min-Width o Max-Width.

Las consultas de los medios se especifican en ciertos puntos que se denominan puntos de interrupción de la consulta de medios. Consulte la próxima sección para aprenderlos en detalle.

Puntos de interrupción de CSS

Los puntos de interrupción en CSS se conocen como aquellos puntos en los que la estructura de un sitio web cambia correspondiente al tamaño de la pantalla del tipo de dispositivo. Los puntos de interrupción se deciden según el tipo de dispositivo o el tipo de contenido. Algunos puntos de interrupción comunes son los siguientes.

1. Para dispositivos móviles: 320px a 480px
2. Para tabletas y iPads: 481px a 768px
3. Para computadoras portátiles: 769px a 1024px
4. Para escritorios: 1025px a 1200px

Mientras lee las explicaciones anteriores, debe haber notado que hemos utilizado dos características de medios de mínimo-ido y máximo. Debes preguntarte cuáles son estos y cuándo usarlos. A continuación le hemos dado todos los detalles esenciales.

Mínimo

La función de medios mínimos especifica el ancho mínimo de un dispositivo específico. Por ejemplo, en la sección anterior, hemos alistado algunos anchos de pantalla en función del tipo de dispositivo, como el ancho de pantalla mínimo de los dispositivos móviles, es de 320 px.

Ejemplo

@Media Screen y (Min-Width: 600px)
pag
tamaño de fuente: 16px;

En el código anterior, hemos especificado que cuando el ancho de pantalla mínimo es de 600 px o más ancho, el tamaño de fuente del párrafo cambiará a 16px. Entonces, cualquier dispositivo con este ancho de pantalla mostrará el texto del párrafo en el tamaño de fuente especificado.

Anchura máxima

La función de medios de ancho máximo establece el ancho máximo de un dispositivo en particular. Por ejemplo, el ancho de pantalla máximo de los dispositivos móviles es 480px. Consulte el ejemplo a continuación para comprenderlo de una mejor manera.

Ejemplo

@Media Screen y (Max-Width: 700px)
pag
tamaño de fuente: 25px;

El código anterior establece que cuando el ancho de pantalla máximo es de 700 px o menor, el tamaño de la fuente del párrafo se alterará a 25px. Cualquier dispositivo que represente este ancho de pantalla mostrará el texto del párrafo en el tamaño de fuente especificado.

Combinando ambos

También puede usar ambas funciones de medios juntas combinándolas con el operador 'y'.

Ejemplo

PAG
estilo fuente: audaz;

@Media Screen y (Min-Width: 600px) y (Max-Width: 700px)
pag
estilo de fuente: cursiva;

El código anterior especifica que si el ancho de la pantalla se encuentra entre 600 px y 700px, entonces el estilo de fuente será en cursiva, de lo contrario, el estilo de fuente será audaz.

Cuándo usar cuál: mínimo-oso o máximo ancho

Si está diseñando su sitio web para dispositivos más pequeños primero, configure sus puntos de interrupción CSS predeterminados con Min-Width y ajuste los dispositivos más grandes en consecuencia.

Mientras tanto, si está diseñando para dispositivos más grandes primero, use el ancho máximo y luego sintonice para dispositivos más pequeños en consecuencia.

Conclusión

El ancho mínimo y el ancho máximo son características de los medios que corresponden a un determinado tipo de medios que se ha especificado en la consulta de medios. El mínimo-ido especifica el ancho de pantalla mínimo de un dispositivo específico, mientras tanto, la función de medios de ancho máximo establece el ancho de pantalla máximo de un dispositivo específico. Si primero está diseñando su sitio web para dispositivos más pequeños, establezca sus puntos de interrupción iniciales con mínimo-oso, mientras que, si está diseñando para dispositivos más grandes primero, use el ancho máximo. Esta publicación discute las características de Min-Width, y Max-Width Media en detalle junto con ejemplos relevantes.