▶️ #14 QUE ES MEDIA QUERY??? 💻 Curso CSS

Summary

El video de Cody Tube ofrece una introducción a los media queries en CSS, que permiten adaptar la apariencia de una página web según el tamaño de la pantalla en la que se visualiza. Se explica cómo utilizar media queries para cambiar las propiedades CSS en diferentes dispositivos, como teléfonos móviles, tabletas y computadoras de escritorio. El presentador guía a los espectadores a través de la creación de diferentes layouts para distintos tamaños de pantalla, utilizando técnicas como la disposición en cuadrícula (grid layout) y la primera metodología móvil (mobile first). Además, se ofrecen consejos prácticos sobre cómo utilizar las herramientas de desarrollo de Firefox para visualizar y probar los diseños en diferentes tamaños de pantalla. El video concluye con un ejercicio que muestra cómo aplicar los conceptos aprendidos para crear un diseño responsivo.

Takeaways

• 📱 Los media queries permiten modificar los valores de las propiedades CSS dependiendo del tamaño de la pantalla donde se visualiza la página.
• 📐 Mediante media queries, se pueden crear diseños adaptables para diferentes dispositivos, como teléfonos móviles, tabletas y computadoras de escritorio.
• 🖨 Para hacer cambios específicos al momento de imprimir, se utiliza la consulta de medios `print`.
• 🖥 Para aplicar cambios en el navegador, se utiliza `screen` y se especifican condiciones lógicas como `min-width`, `max-width`, `min-height`, `max-height`, entre otros.
• 🔄 Se pueden utilizar operadores lógicos `and` y `or` para combinar múltiples condiciones en una sola media query.
• 🎨 Es posible cambiar no solo el color y el tipo de letra, sino también el diseño general de la página, como el uso de rejillas y columnas, con media queries.
• 🌐 Se recomienda seguir la metodología Mobile First, es decir, diseñar primero para dispositivos móviles y luego adaptar para pantallas más grandes.
• 📏 Mediante media queries, se pueden definir diferentes layouts para diferentes rangos de tamaño de pantalla.
• 🛠️ Es útil trabajar con herramientas de desarrollo de navegadores, como Firefox Developer Tools, para visualizar y probar los diseños en diferentes tamaños de pantalla.
• 📉 Cuando se disminuye el tamaño de la pantalla hasta cierto punto, se aplican los estilos definidos en la media query correspondiente.
• 📈 Al aumentar el tamaño de la pantalla, los estilos definidos para rangos de tamaño superiores se aplican según las condiciones establecidas.

Q & A

¿Qué son los media queries en CSS?

Los media queries son una característica de CSS que permiten aplicar estilos condicionales basados en las características del dispositivo o contexto de visualización, como el tamaño de la pantalla.

¿Cómo se utiliza un media query para modificar estilos en función del tamaño de la pantalla?

Para utilizar un media query, se escribe la palabra clave `@media`, seguida de una condición que describe las características del dispositivo, como `screen` y un tamaño de pantalla específico, y luego se incluyen las reglas CSS entre llaves.

¿Qué es el 'mobile first' en el diseño web y por qué es importante?

El 'mobile first' es una metodología de diseño que implica diseñar primero la versión móvil del sitio web y luego adaptarlo para pantallas越来越大. Es importante porque la mayoría de las personas acceden a internet desde dispositivos móviles.

¿Cómo puedo probar diferentes tamaños de pantalla sin tener que cambiar manualmente el tamaño de mi navegador?

Puedes usar las herramientas de desarrollador de tu navegador, como en Firefox, donde al presionar F12 se accede a la sección de 'diseño' o 'layout', que permite simular diferentes tamaños de pantalla.

¿Cómo se especifican los rangos de tamaño de pantalla en un media query?

Para especificar rangos de tamaño de pantalla, se utilizan las palabras clave `min-width` y `max-width` dentro de la condición del media query para establecer los límites inferior y superior, respectivamente.

¿Qué es CSS Grid y cómo se relaciona con los media queries?

CSS Grid es una tecnología de diseño web que permite crear layouts complejos mediante una cuadrícula. Se relaciona con los media queries porque se pueden crear diferentes diseños de cuadrícula para diferentes tamaños de pantalla.

¿Cómo se puede cambiar el diseño de una página web para diferentes dispositivos usando media queries?

Mediante el uso de media queries, se pueden definir diferentes conjuntos de reglas CSS para diferentes tamaños de pantalla. Cada conjunto de reglas se activa cuando el tamaño de pantalla del dispositivo coincide con la condición especificada en el media query.

¿Por qué es recomendable trabajar con la metodología 'mobile first' al diseñar un sitio web?

Es recomendable trabajar con 'mobile first' porque asegura que la versión móvil del sitio web funcione correctamente y es accesible para la mayoría de los usuarios. Además, permite una mejor optimización de recursos y una experiencia de usuario más satisfactoria en dispositivos móviles.

¿Cómo se puede cambiar el color de fondo y el color de texto de un sitio web usando un media query?

Se puede cambiar el color de fondo y el color de texto dentro de un media query al definir las reglas CSS correspondientes dentro de la condición del media query, utilizando las propiedades `background-color` y `color` respectivamente.

¿Cómo se puede utilizar la herramienta de desarrollador para probar diferentes tamaños de pantalla?

Al abrir la herramienta de desarrollador (presionando F12), se puede ir a la sección de 'diseño' o 'layout' y utilizar la opción para ajustar el tamaño de la pantalla, lo que permite simular diferentes tamaños de dispositivos sin tener que modificar manualmente el tamaño del navegador.

¿Qué son las 'columns' y 'rows' en el contexto de CSS Grid?

Las 'columns' y 'rows' en CSS Grid son las divisiones horizontales y verticales respectivamente de la cuadrícula. Se definen utilizando las propiedades `grid-template-columns` y `grid-template-rows` para crear una estructura de diseño en forma de cuadrícula.

¿Cómo se puede asegurar que un diseño web sea responsivo?

Para asegurar que un diseño web sea responsivo, se deben utilizar media queries para adaptar el diseño a diferentes tamaños de pantalla. Además, se recomienda seguir la metodología 'mobile first', diseñando primero para dispositivos móviles y luego adaptando el diseño para pantallas越来越大.

Outlines

00:00

🖥️ Utilización de Media Queries en CSS

El primer párrafo introduce el concepto de Media Queries en CSS, que permite modificar las propiedades CSS en función del medio de visualización, como el tamaño de pantalla. Se menciona cómo los cambios varían si se visualiza desde un celular, una tablet o una computadora. Se da un ejemplo práctico de cómo cambiar los estilos para la vista previa de impresión y para diferentes tamaños de pantalla utilizando 'screen' y los operadores lógicos 'and' y 'or'. Además, se explica cómo utilizar 'max-width' para aplicar estilos hasta un ancho máximo de pantalla y cómo utilizar las herramientas de desarrollador de Firefox para probar diferentes tamaños de pantalla.

05:03

📱 Diseño adaptable con Mobile First

El segundo párrafo profundiza en el uso de Media Queries para el diseño web adaptable, siguiendo la filosofía Mobile First. Se recomienda diseñar primero para dispositivos móviles y luego para tabletas y PC de escritorio. Se habla sobre la creación de un diseño de cuadrícula utilizando 'grid-template-columns' y 'grid-template-rows', y se sugiere trabajar con Firefox para visualizar las rejillas. Se destaca la importancia de asegurar que los diseños sean responsivos y se adapten fácilmente a las pantallas de los dispositivos móviles. Se proporciona una guía para crear un diseño para dispositivos móviles con un ancho máximo de 480 píxeles y se ofrece un enlace para más información sobre 'grid'.

10:04

📊 Diseño responsivo con diferentes tamaños de pantalla

El tercer párrafo continúa explicando cómo se puede ajustar el diseño para diferentes rangos de tamaños de pantalla. Se describe cómo se puede crear un diseño para pantallas entre 480 y 768 píxeles y luego otro diseño para pantallas más grandes a partir de 768 píxeles. Se muestra cómo cambiar la disposición de los elementos en la página para cada uno de estos rangos utilizando Media Queries. Se enfatiza la sencillez del proceso siempre y cuando se tengan claros los valores mínimos y máximos para cada condición y se ofrece una perspectiva final sobre la facilidad de implementar diseños responsivos.

Keywords

💡Media Query

Media Query es una técnica en CSS que permite aplicar estilos condicionales basados en las características del dispositivo que está visualizando el contenido. En el video, se utiliza para cambiar los estilos CSS dependiendo del tamaño de la pantalla, permitiendo así una experiencia de visualización óptima en diferentes dispositivos.

💡CSS

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo que se utiliza para definir la presentación de documentos escritos en un lenguaje de marcado, como el HTML. En el video, se menciona el uso de CSS para modificar el aspecto de una página web según el tamaño de la pantalla del dispositivo.

💡Tamaño de pantalla

El tamaño de pantalla es una característica de los dispositivos electrónicos que afecta directamente cómo se ven los contenidos visuales. En el video, el tamaño de pantalla es un factor clave para activar los Media Queries y adaptar el diseño de la página web.

💡Diseño responsivo

El diseño responsivo es un enfoque en el diseño de sitios web que permite que el mismo diseño sea adaptable a diferentes tamaños de pantalla. En el video, se aborda cómo utilizar Media Queries para lograr un diseño responsivo, asegurando que el contenido se muestre adecuadamente en dispositivos móviles, tabletas y computadoras de escritorio.

💡Mobile First

Mobile First es una filosofía de diseño que sugiere que se debe diseñar primero para dispositivos móviles y luego adaptar el diseño para otros dispositivos. En el video, se recomienda esta metodología para crear diseños web que se ajusten a la pantalla del celular y luego se adapten para tabletas y PC de escritorio.

💡Grid Layout

Grid Layout es una técnica de diseño web que permite crear diseños de cuadrícula complejos y flexibles. En el video, se utiliza Grid Layout para definir el diseño de la página con filas y columnas, lo que se ve afectada por los Media Queries para diferentes tamaños de pantalla.

💡Firefox Developer Tools

Firefox Developer Tools es un conjunto de herramientas integrado en el navegador Firefox que permite a los desarrolladores web inspeccionar, editar y debuggear el código de una página web. En el video, se sugiere su uso para visualizar y probar los cambios en el diseño de la cuadrícula y el layout de la página.

💡Media Query Ranges

Los rangos de Media Query son condiciones que se definen para aplicar estilos CSS entre límites específicos de características del dispositivo, como el ancho de pantalla. En el video, se muestra cómo utilizar rangos para aplicar estilos diferentes dependiendo de si el ancho de pantalla está entre 480 y 720 píxeles.

💡Print Preview

La vista previa de impresión es una función que permite ver cómo se verá una página web una vez impresa. En el video, se menciona el uso de Media Queries para cambiar los estilos de la página específicamente para la vista previa de impresión, como cambiar los colores del fondo y del texto.

💡Logical Operators

Los operadores lógicos en las Media Queries se utilizan para combinar múltiples condiciones. En el video, se menciona el uso de 'and', que es un operador lógico, para combinar condiciones de tamaño de pantalla en una Media Query.

💡Viewport

El viewport es la parte visible de una página web en un dispositivo. En el video, se hace referencia al viewport como el área en la que se aplicarán los cambios de estilo definidos por las Media Queries, dependiendo del tamaño y las características del dispositivo.

Highlights

Hoy hablaremos sobre los media queries, que permiten modificar las propiedades CSS dependiendo del tamaño de la pantalla.

Media queries incluyen factores como el tamaño de la pantalla para adaptar la visualización en dispositivos móviles, tabletas y PCs.

Se pueden utilizar media queries para cambiar el diseño y los estilos CSS en función del ancho máximo de la pantalla.

Se muestra cómo utilizar media queries con la pseudo-clase `print` para estilos específicos de impresión.

Se puede utilizar la palabra clave `screen` para cambios específicos al visualizar en un navegador.

Se puede utilizar `max-width` para aplicar estilos cuando la pantalla es más pequeña que un ancho específico.

Firefox Developer Tools permite visualizar y probar diferentes tamaños de pantalla sin cambiar el tamaño de la ventana.

Se puede especificar rangos de ancho de pantalla para aplicar estilos en un rango específico de tamaños de pantalla.

Se recomienda la metodología Mobile First, diseñando primero para dispositivos móviles y luego adaptando para tabletas y PCs.

Se puede utilizar `grid-template-columns` y `grid-template-rows` para crear diseños de cuadrícula.

Firefox Developer Tools incluye una opción para visualizar las rejillas de diseño activas.

Se discute cómo trabajar con layouts adaptables utilizando media queries para diferentes tamaños de pantalla.

Se proporciona un ejemplo de cómo cambiar la disposición de elementos en una página web utilizando media queries.

Se explica cómo se aplican los cambios de diseño en diferentes rangos de tamaños de pantalla, como de 480 a 720 píxeles.

Se muestra cómo se puede cambiar la disposición de elementos en una página web para pantallas más grandes que 768 píxeles.

Se resalta la importancia de entender los valores mínimos y máximos en las condiciones de los media queries.

Se sugiere seguir al creador en Twitter y YouTube para recibir actualizaciones y nuevos contenidos.

Transcripts

hola amigos bienvenidos a cody tube el

día de hoy vamos a hablar acerca de los

media que es los media query este

permite modificar los valores de las

propiedades css dependiendo del medio

donde se esté visualizando la pagina el

medio incluirá en el tamaño de la

pantalla si es que esto lo estamos

viendo desde un celular será un tamaño

más pequeño si lo vemos desde una tablet

un poco más grande y si es que lo vemos

desde una portátil o pc de escritorio

las pantallas son mucho más grandes

entonces nosotros podemos modificar los

valores de las propiedades css

dependiendo del tamaño de la pantalla

donde se está visualizando como lo

hacemos en este vídeo te lo voy a

explicar y quédate hasta el final ya que

terminaremos con un ejemplo donde te

explico cómo tener estos diferentes

layouts dependiendo de la pantalla donde

se muestre empecemos actualmente en

pantalla tenemos un texto de color

blanco y un fondo de color ocre esto se

puede modificar de la siguiente manera

para utilizar los media quiz simplemente

vamos a poner

media y luego de esto debemos

especificar donde queremos ver el cambio

por ejemplo si es que queremos que este

cambio se vea en la pantalla preliminar

antes de enviar a imprimir simplemente

debemos poner print abrir y cerrar

llaves y dentro de estas llaves vamos a

ubicar las propiedades que queremos

cambiar con sus respectivos valores es

decir si yo quiero modificar estos dos

valores de acá arriba el fondo y el

color del texto debo copiar todo esto

incluido las etiquetas entonces esto yo

lo voy a poner en esta parte de acá y

vamos a cambiar el color del fondo a

blanco por ejemplo y el color de la

letra a negro voy a guardar cambios ahí

cuando se va a ver estos cambios pues yo

he especificado que esto sea al momento

de que tenga la vista preliminar de

imprimir entonces me voy a mi página

pongo control pe y observen si bien es

cierto la página tiene un color de fondo

ok con una letra de color blanco al

momento de enviar a imprimir tengo otros

colores

porque lo he modificado en esta parte de

aquí ahora yo puedo hacer que estos

cambios se hagan dentro del navegador

para esto voy a escribir screen y tengo

que especificar le cuando en la pantalla

yo quiero que se haga estos cambios y

pues para eso vamos a utilizar unos

conectores lógicos que son básicamente

un y también se puede utilizar un o para

él y obviamente vamos a utilizar la

palabra en inglés en que significa y

pues vamos a poner el valor donde

queremos que se haga el cambio por

ejemplo voy a poner un ancho máximo

básicamente aquí trabajamos con el ancho

entonces vamos a ponerle el valor de

480 píxeles por ejemplo que estoy

diciendo ahí pues básicamente que los

cambios se vean en pantalla y cuando

tengan un ancho máximo de 480 o sea

todos los valores desde cero píxeles

hasta

480 se va a aplicar el cambio que se

tiene ahí entonces en este momento voy a

guardar fíjense el tamaño que tengo yo

en la parte superior esto es de 610 si

yo voy disminuyendo esto hasta llegar a

los 480 ahí se me va a hacer el primer

cambio voy aumentando no pasa nada pero

al disminuir y al llegar a los 480

cambia esto de color ahora estoy como un

navegador firefox si ustedes no saben

cómo sacar esta parte de aquí que me

permite poder ir testeando varios

tamaños de pantalla pues es muy sencillo

simplemente eso es una página normal lo

que se puede hacer básicamente es ir

disminuyendo el tamaño

hasta que se haga muy pequeño lo voy

haciendo grande pero si es que no

quieres hacer esto simplemente vas a

presionar efe 12 que me va a mostrar mi

herramienta de desarrollador me de tools

y en esta parte de aquí presionas y ya

tenemos esta vista de que podemos cerrar

el depto también puedo especificar

rangos es decir yo voy a copiar una

nueva regla en esta parte de acá

qué tal si es que yo quiero que se

muestre entre

480 y un máximo de

720 por ejemplo simplemente voy a copiar

esto de acá y aquí voy a poner 720

entonces el ancho máximo sería 720 y

este 480 que es el límite inferior sería

el ancho mínimo estoy diciendo que lo

que quiero que se muestre dentro pues

que tenga que esté en el rango de

480 píxeles como mínimo y

720 píxeles como máximo que voy a

cambiar aquí pues puedo básicamente

modificar cualquier propiedad de css

para este fin simplemente voy a cambiar

a otro color digamos este rojo puedo

cambiar inclusive

el valor del texto algo por aquí y listo

entonces voy a guardar cuando estoy

menos de los

480 píxeles fondo blanco letras negras

si aumento pues tengo este otro

rango hasta los 720 aquí puedo ver el

ancho que estoy testeando

entonces al momento que llegue a 720 se

quitan es todos los valores que estén

definidos aquí y se pone los valores por

defecto que vienen a ser los valores

principales

no importa el tamaño de la página esto

seguirá siendo grande hasta que se

ajuste a la pantalla que se esté

visualizando

pues hasta aquí muy bien puedo cambiar

colores el tipo de letra el color de la

letra no hay mayor complicación aquí

vamos a hacer un ejercicio un poco más

complejo para que vean que también se

puede trabajar con play outs es decir

con el posicionamiento de los elementos

dentro de la página para lo que vamos a

hacer a continuación vamos a trabajar

con kate para esto voy a utilizar esto

de acá que ya lo tenían vamos a quitar

este título voy a comentarlo nada más

tengo todas estas etiquetas semánticas

parte de html5 ya las conocemos muy bien

le ha aplicado una hoja de estilos

inicial que es esta parte de aquí

simplemente es para darles ya colores

definidos y pues en la hoja de estilos

donde vamos a trabajar los media quiz es

esta hoja de estilos de aquí y esto de

acá lo podemos borrar ya

voy a empezar declarando la propiedad

gris luego ponemos create template

columns donde crearemos 12 columnas de

un tamaño de una fracción cada una las

filas las creamos con grid template rose

y crearemos 10 filas de un tamaño de una

fracción y aquí solamente estoy haciendo

que la letra se vea más gruesa ahora

para visualizar esto de mejor manera les

recomiendo trabajar con firefox porque

les permite hacer lo siguiente una vez

que vaya the tools presionando f12 me

puedo ir aquí en el apartado que dice

disposición si tienes el navegador en

inglés esto se llama layout y activas la

casilla de aquí para seleccionar el

contenedor en este caso body y el

navegador se visualizará las rejillas

con las columnas y filas que hemos

creado cuando estás trabajando con un

layout siempre es recomendable trabajar

con la metodología de mobile first es

decir primero se diseña la vista que se

va a tener en un celular luego la vista

para una tablet y finalmente un pc de

escritorio porque se hace esto pues

actualmente la mayoría de las personas

navegan en internet desde un dispositivo

móvil por este motivo es que nosotros

como desarrolladores debemos asegurarnos

que nuestros diseños sean responsivo es

decir que se acoplen fácilmente a la

pantalla del celular una vez que nos

hemos asegurado de esto vamos

desarrollando el resto de vistas es

decir para una tablet con sus posibles

dimensiones y luego para una pc de

escritorio entonces vamos a trabajar con

la primera medida de 480 píxeles para

tener un acercamiento a lo que sería un

dispositivo móvil siempre empezamos

digitando a media y especificamos screen

porque los cambios que queremos ver son

en pantalla y el ancho máximo lo

especificamos de esta manera dentro de

estas llaves vamos a poner todo el

layout que queremos que se muestra en

pantalla cuando el ancho sea menor a los

480 píxeles aquí lo que estamos

especificando son cada una de las

dimensiones tanto en ancho como en que

debe tener cada uno de los bloques esto

lo vimos mucho más a detalle en el vídeo

sobre el grid y te dejo el link que al

mismo en la parte superior en caso de

que no tengas muy claro qué es lo que

está sucediendo aquí te recomiendo

revisarlo entonces si es que yo lo estoy

viendo desde un celular voy a tener esta

disposición que como tú sabrás es mucho

más fácil leerlo de una forma vertical

donde solamente voy haciendo hacia abajo

cuando la pantalla va creciendo y supera

estos 480 píxeles pues no tengo nada

especificado por eso se regresa esta

parte de acá entonces que tenemos que

hacer pues igual como lo vimos antes

simplemente tenemos que aumentar una

condición más donde voy a tener el media

que vaya desde 480 píxeles hasta otro

valor ese valor va a ser de

768 así que lo voy a escribir acá

lo que he hecho aquí es básicamente

poner un valor mínimo que son 480

píxeles y un máximo de

768 píxeles que es lo que vamos a hacer

aquí pues básicamente vamos a cambiar la

disposición que tenemos en la parte

superior y esto lo vamos a hacer de la

siguiente manera primero este valor de

aquí debe ser el valor máximo y si

prestan atención ha cambiado ya la

disposición tenemos esto aumentamos el

ancho de pantalla y cambia acá y

finalmente una tercera condición con un

valor mínimo de

768 píxeles que quiere decir desde esta

medida en adelante todos los elementos

van a tener esta otra disposición de

aquí como pueden ver todo esto en

realidad es bastante sencillo

simplemente lo que tenemos que tener en

claro son los valores mínimo y máximo y

lo que vaya dentro de cada condición

dependerá de lo que queramos modificar

y bien amigos esto es todo por el vídeo

de hoy espero les sea de ayuda si te ha

gustado por favor dale like y suscríbete

para que te enteres cuando suba un nuevo

contenido y recuerden que me pueden

seguir también en twitter en youtube

muchas gracias de nuevo y nos vemos la

próxima semana

d

[Música]

sí

[Aplausos]