▶️ #14 QUE ES MEDIA QUERY??? 💻 Curso CSS
Summary
TLDREl 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
🖥️ 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.
📱 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'.
📊 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.
Mindmap
Keywords
💡Media Query
💡CSS
💡Tamaño de pantalla
💡Diseño responsivo
💡Mobile First
💡Grid Layout
💡Firefox Developer Tools
💡Media Query Ranges
💡Print Preview
💡Logical Operators
💡Viewport
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]
Ver Más Videos Relacionados
5.0 / 5 (0 votes)