Original article: https://www.freecodecamp.org/news/media-query-css-example-max-and-min-screen-width-for-mobile-responsive-design/
Cuando estás diseñando un sitio web, es muy importante que tu contenido se vea bien en todos los tamaños de pantalla.
En este artículo, hablaré sobre cómo usar el diseño responsivo y las consultas de medios (media queries)* para que esto suceda. También proporcionaré ejemplos de código para consultas de medios usando anchos de pantalla máximos y mínimos.
¿Qué es el Diseño Responsivo?
El diseño responsivo es la práctica de asegurarse de que tu contenido se vea bien en todos los tamaños de pantalla. Todo en el sitio web, incluidos los diseños, las fuentes y las imágenes, debe adaptarse automáticamente al dispositivo del usuario.
A principios de la década del 2000, los desarrolladores se concentraron en asegurarse de que sus sitios web se vieran bien en pantallas de mayor tamaño, como computadoras portátiles y de escritorio. En el mundo actual, debe considerar dispositivos como teléfonos móviles, tabletas e incluso relojes.
Un componente importante del diseño responsivo son las consultas de medios.
¿Qué es una consulta de medios?
En CSS, una consulta de medios se utiliza para aplicar un conjunto de estilos en función de las características del navegador, incluidos el ancho, el alto o la resolución de la pantalla.
Puedes ver un ejemplo de una consulta de medios en la página de aprendizaje de freeCodeCamp.
Para tamaños de pantallas grandes como computadoras de escritorio, podemos ver un menú de búsqueda en la esquina superior izquierda.
Pero en los dispositivos móviles, no hay menú de búsqueda y solo tenemos las opciones de menú y el botón de inicio de sesión.
Sintaxis básica de una consulta de medios
Aquí está la sintaxis básica para una consulta de medios en CSS:
@media media-type (media-feature){
/*Los estilos van aquí*/
}Analicemos lo que significa esta sintaxis.
El @media es un tipo de regla-At en CSS. Estas reglas dictarán cómo se verá el CSS en función de ciertas condiciones.
El tipo de medio se refiere a la categoría de medios para el dispositivo. Los diferentes tipos de medios incluyen all, print, screen y speech.
- all - funciona para todos los dispositivos
- print: funciona para dispositivos en los que el medio está en modo de vista previa de impresión
- screen - funciona para dispositivos con pantallas
- speech: funciona para dispositivos como lectores de pantalla donde el contenido se lee en voz alta al usuario
Según la documentación,
Excepto cuando se utilizan los operadores lógicosnotoonly, el tipo de medio es opcional y el tipoallestá implícito.
Puedes optar por omitir el tipo de medio y utilizar esta sintaxis en su lugar.
@media (media-feature){
/*Los estilos van aquí*/
}La función de medios se refiere a las características del navegador, que incluyen la altura y el ancho de la ventana gráfica, la orientación o la relación de aspecto. Para obtener una lista completa de las posibles funciones multimedia, por favor visita los documentos de MDN.
Para este artículo, nos vamos a centrar en la función de medios de ancho.
Si deseas crear consultas de medios más complejas, puedes utilizar operadores lógicos.
and- Este operador se usa para unir varias características de medios. Si todas las características de los medios son verdaderas, los estilos dentro de las llaves se aplicarán a la página.not- Este operador invierte una consulta verdadera en falsa y una consulta falsa en verdadera.,(coma) - Este operador separará varias funciones multimedia con comas y aplicará los estilos dentro de la llave si se cumple una de las condiciones.
Ejemplos de consultas de medios
Echemos un vistazo a algunos ejemplos que muestran cómo usar consultas de medios en CSS.
En este primer ejemplo, queremos que el color de fondo cambie a azul cuando el ancho del dispositivo sea de 600 px o menos.
En el CSS, queremos agregar un (ancho máximo: 600 px) para la consulta de medios que le dice a la computadora que se dirija a dispositivos con un ancho de pantalla de 600 px o menos.
Dentro de la consulta de medios, cambiamos los estilos de fondo para el body a background-color: #87ceeb;.
Aquí está la consulta de medios completa:
@media (max-width: 600px) {
body {
background-color: #87ceeb;
}
}Aquí está el ejemplo de CodePen. Puedes probarlo si haces clic en Editar en la esquina superior derecha.
En este segundo ejemplo, queremos cambiar el color de fondo de azul a rojo si el dispositivo tiene un ancho entre 600 y 768 px. Podemos usar el operador and para lograr esto.
@media (min-width: 600px) and (max-width: 768px) {
body {
background-color: #de3163;
}
}Aquí está el ejemplo completo de CodePen para que lo pruebes:
Cuando lo pruebes, deberías ver que el color de fondo es azul si el ancho de la pantalla es inferior a 600 px o superior a 768 px.
¿Debería escribir consultas de medios separadas para cada dispositivo en el mercado?
La respuesta corta a esa pregunta es no.
Hay demasiados dispositivos en el mercado para intentar escribir una consulta de medios para cada dispositivo. La tecnología siempre está cambiando, lo que significa que siempre aparecerán nuevos dispositivos.
Es más importante que se dirija a una variedad de dispositivos mediante consultas de medios. En el artículo freeCodeCamp de Cem Eygi, enumera algunos puntos de interrupción comunes que se utilizan para las consultas de medios.
- 320px — 480px: dispositivos móviles
- 481px — 768px: iPads, tabletas
- 769px — 1024px: pantallas pequeñas, portátiles
- 1025px — 1200px: Computadoras de escritorio, pantallas grandes
- 1201px y más — Pantallas extra grandes, TV
Conclusión
El diseño responsivo es la práctica de asegurarse de que tu contenido se vea bien en todos los tamaños de pantalla. Todo en el sitio web, incluidos los diseños, las fuentes y las imágenes, debe adaptarse automáticamente al dispositivo del usuario.
En CSS, una consulta de medios se utiliza para aplicar un conjunto de estilos en función de las características del navegador, incluidos el ancho, el alto o la resolución de la pantalla.
Esta es la sintaxis básica para una consulta de medios en CSS.
@media media-type (media-feature){
/*Los estilos van aquí*/
}El tipo de medio es opcional a menos que estés utilizando los operadores lógicos not o only. Si se omite el tipo de medio, la consulta de medios se dirigirá a todos los dispositivos.
Espero que este artículo te haya resultado útil y te deseo la mejor de las suertes en tu aprendizaje con CSS.