En el pasado, crear un sitio web era mucho más sencillo. Hoy en día, el diseño de un sitio web debe adaptarse no solo a las computadoras, sino también a las tabletas, dispositivos móviles e incluso televisores.
Hacer un sitio web con un diseño adaptable se llama Diseño web adaptable. Y las consultas de medios CSS son una de las partes más importantes del diseño adaptable. En este artículo, veremos más de cerca las consultas de medios y cómo usarlas en CSS.
Si lo prefiere, puede ver la versión en video a continuación:
¿Qué es una consulta de medios?
Una consulta de medios es una función de CSS3 que hace que una página web adapte su diseño a diferentes tamaños de pantalla y tipos de medios.
Sintaxis
@media media type and (condition: breakpoint) { // CSS rules }Podemos dirigirnos a diferentes tipos de medios en una variedad de condiciones. Si la condición y / o los tipos de medios se cumplen, se aplicarán las reglas dentro de la consulta de medios; de lo contrario, no lo harán.
La sintaxis puede parecer complicada al principio, así que expliquemos cada parte una por una en detalle ...
@ Regla de medios
Comenzamos a definir consultas de medios con la regla @media y luego incluimos reglas CSS dentro de las llaves. La regla @ media también se utiliza para especificar los tipos de medios de destino.
@media () { // CSS rules }Paréntesis
Dentro del paréntesis, establecemos una condición. Por ejemplo, quiero aplicar un tamaño de fuente más grande para dispositivos móviles. Para hacer eso, necesitamos establecer un ancho máximo que verifique el ancho de un dispositivo:
.text { font-size: 14px; } @media (max-width: 480px) { .text { font-size: 16px; } }Normalmente, el tamaño del texto será de 14px. Sin embargo, dado que aplicamos una consulta de medios, cambiará a 16 px cuando un dispositivo tenga un ancho máximo de 480 px o menos.
Importante: ponga siempre sus consultas de medios al final de su archivo CSS.
Tipos de medios
Si no aplicamos un tipo de medio, la regla @ media selecciona todos los tipos de dispositivos de forma predeterminada. De lo contrario, los tipos de medios vienen inmediatamente después de la regla @ media. Hay muchos tipos de dispositivos pero podemos agruparlos en 4 categorías:
- all - para todos los tipos de medios
- imprimir - para impresoras
- pantalla: para pantallas de computadora, tabletas y teléfonos inteligentes
- voz: para lectores de pantalla que "leen" la página en voz alta
Por ejemplo, cuando quiero seleccionar solo pantallas, estableceré la palabra clave de pantalla justo después de la regla @ media. También debo concatenar las reglas con la palabra clave "y":
@media screen and (max-width: 480px) { .text { font-size: 16px; } }Puntos de interrupción
Los puntos de interrupción son quizás el término más común que escuchará y usará. Un punto de interrupción es clave para determinar cuándo cambiar el diseño y adaptar las nuevas reglas dentro de las consultas de medios. Volvamos a nuestro ejemplo al principio:
@media (max-width: 480px) { .text { font-size: 16px; } }Aquí, el punto de interrupción es 480px. Ahora la consulta de medios sabe cuándo establecer o sobrescribir la nueva clase. Básicamente, si el ancho de un dispositivo es menor que 480px, se aplicará la clase de texto; de lo contrario, no lo hará.
Puntos de interrupción comunes: ¿Existe una resolución estándar?
Una de las preguntas más frecuentes es "¿Qué punto de interrupción debo utilizar?". Hay una tonelada de dispositivos en el mercado, por lo que no podemos y no debemos definir puntos de interrupción fijos para cada uno de ellos.
Por eso no podemos decir que exista una resolución estándar para los dispositivos, pero existen algunos puntos de interrupción de uso común en la programación diaria. Si está utilizando un marco CSS (como Bootstrap, Bulma, etc.) también puede utilizar sus puntos de interrupción.
Ahora veamos algunos puntos de interrupción comunes para anchos de dispositivos:
- 320px - 480px: dispositivos móviles
- 481px - 768px: iPads, tabletas
- 769px - 1024px: pantallas pequeñas, portátiles
- 1025px - 1200px: escritorios, pantallas grandes
- 1201px y más: pantallas extragrandes, TV
Como dije anteriormente, estos puntos de interrupción pueden diferir y no hay un estándar definido exactamente, pero estos son algunos de los que se usan comúnmente.
Terminando
El diseño receptivo es imprescindible en el campo del diseño y desarrollo web actual. Las consultas de medios son una de las partes más importantes de la creación de diseños receptivos, y espero que mi publicación le resulte útil para comprender cómo funcionan las consultas de medios.
Si desea obtener más información sobre el desarrollo web, no dude en suscribirse a mi canal.
¡Gracias por leer!