Claro, supongo que usan media queries para adaptar paginas a celulares, por ejemplo el nav en la compu aparece en grid uno al lado de otro y en celular se oculta el nav y sus items y solo podés acceder apretando un botón, y te despliega una grilla vertical
Hola don Marcos. Me gustó el video. Lo entendí perfectamente porque tenía dudas sobre como manejar los @media querys. Pero ahora sí lo entiendo. Muchas gracias.
Me sirvio tu video, ojala lo hubieras extendido un poco mas ¿Qué sucede cuando pasas de los 1960 px? es decir, cuando es una pantalla mas grande a la que tienes actualmente y tu query solo llega hasta 1960
buen video amigo.. una pregunta a mi me funciona solo con pantalla por encima de 1000px osea si coloco un max-width: 800px; no funciona. osea solo funciona si minimizo el chrome pero paso a ver en modo responsive y no funciona llega a 400px y aun asi no funciona amenos que el max-width sea de 1000px en adelante, lo pase a mi telefono y tampoco reproduce el max-width de 800px y se supone que esa pantalla es de 600px. podrian ayudarme?😞
Buen día Doc. una consulta al inicio veo que colocas un @media screen and (....) pero en otro lados veo que omiten ello y colocan así @media (...) omiten el escreen pero no entiendo cual es la diferencia, espero me pueda responder, de ante antemano muchas gracias.
Excelente tutorial amigo, lo que no entiendi cuando se trabaja con medias si debo modificar en la reso dicha o hacerlo con unos pixeles menos de los ya declarados
en media queries es para activar parametros puede hacer la pagina web normal para pc y luego lo adapta a media queries y lo hace de nuevo pero ya con memdidas de celular o tablet
Muchas gracias. ¿cuál extensión instaló para poder ver los diferentes formatos de su página web en Internet? Me parece más preciso que estar solamente encogiendo y agrandando la ventana del navegador.
Hola Daniela! En las herramientas incluidas de los navegadores puedes cambiar la vista a móvil para poder manejar diferentes formatos de pantalla y ver si el sitio se acopla, para no tener que estar cambiando el tamaño de la ventana del navegador
Hola Marcos! Tengo una duda, a mi no me salia, osea no cambiaba de fondo de color a un div, pero le puse @media only screen.... Tiene algo que ver el ONLY? Para que sirve? Gracias y bueno video.. agradeceria que hagas uno con muchos divs y no solo cambiar de color si no poner un div debajo del otro. saludoss
@@baskcuber el viewport es otro de los pilares del Responsive Design, que es el mobile first... es como una ampliación de los media queries... cuando tu pones el clasico le estas diciendo a los navegadores que el ancho de pantalla, es el ancho real del dispositivo (por ejemplo que los celulares sea de 480px y no de 990px como muestran algunos), y que la escala inicial sea 1... Esto es independiente de los Media Queries que tu declares....
Por si acaso sabrás como hacer que una página no se pueda achicar más ?? , hay algunas páginas que cuando tu los vas achicando ya no se pueden achicar más y eso que solo los llegue achicar hasta la mitad , eso estoy buscando ,,, y hasta ahora no lo encuentro , no sé como lo harán
como tal no, tu puedes dimensionar una ventana y eso no se puede limitar por CSS, si lo que quieres es que ya no se redimensione más puedes especificar en los queries las dimensiones de cuando quieres que se ajuste el diseño
tengo un problema que nadie soluciona ni se menciona en ninguna parte. cuando pongo AND solo se queda en blanco como cualquier texto y cuando actualizo en el navegador nada cambia....y me aparece media query expected..no se que hacer
Haber, a veces solemos usar 02 archivos, uno ESTILOS.CSS OTRO RESPONSIVE.CSS; te has aserciorado si en tu INDEX.PHP estas VINCULANDO con la etiqueta ???
espero alguien me pueda responder tengo un titulo que en cierta medida desaparece y quiero que se vea de nuevo pero no encuentro la forma de volverlo a poner con media queries alguien que sepa porfavor
Buena explicacion pero... el AND no es para ANIDAR nada.... le das enfasis como si eso significara... el AND es un operador logico y en las media queries de CSS se pueden usar el AND el NOT y el ONLY
Ya lo pude solucionar por si alguien le sirve el problema está que al inspeccionar los media query no se ven o se ven solo por un segundo al no tener esta etiqueta Ya veo que esa linea es importante ya no la volvere a omitir!
El banner que esta en la pagina w3schools para ese momento, es profético. XD, el comunismo es un azote en el mundo . Por cierto, ¡Mil gracias por el tutorial! (y)
Es un video bien basico, no aprendi nada nuevo.... tengo que aplicar media queries en un sitio terminado.... y pues no es como que cambiar de colores te ilustre demasiado. LMAO seguire buscando mejores tutoriales.
Creo que la respuesta a tu comentario seria: Porque desprecias el trabajo de otro por no saber hacer el tuyo... Media Queries y BreakPoints explicados como se explico aca, es mas que suficiente para hacer lo que necesites, con tu sitio actual... El que TU no sepas o NO TENGAS la IMAGINACION para HACERLO, no es problema de los otros... Ahora bien... ya que comentas de forma tan altanera... si no sabes que hacer con tu sitio actual, busca a alguien que si sepa... Y no seas tan mal educado
Me fue muy útil tu video ahora que empece a estudiar sonbre mq. Muy práctico!
Agradecido, excelente explicación. Dios te siga bendiciendo
Me acabas de ayudar un montón, chuzo, te lo agradezco
Muchas gracias señor Dios te bendiga.
Claro, supongo que usan media queries para adaptar paginas a celulares, por ejemplo el nav en la compu aparece en grid uno al lado de otro y en celular se oculta el nav y sus items y solo podés acceder apretando un botón, y te despliega una grilla vertical
Hola don Marcos. Me gustó el video. Lo entendí perfectamente porque tenía dudas sobre como manejar los @media querys. Pero ahora sí lo entiendo. Muchas gracias.
De nada Carlos, qué bueno que te gustó el.video
Muchas gracias, me gusta que vallas al punto del tema, me sirvió muchísimo.
*vayas
Encantado de ver tu video. Muy didáctico.
Me sirvio tu video, ojala lo hubieras extendido un poco mas ¿Qué sucede cuando pasas de los 1960 px? es decir, cuando es una pantalla mas grande a la que tienes actualmente y tu query solo llega hasta 1960
Supongo que debe de aplicar las propiedades y valores por defecto o que ya tienes definidas.
Se aplican los valores por defecto, es decir, se toma la pantalla como si fuese un monitor de escritorio
gracias, me alegraste el dia!
buen video amigo..
una pregunta a mi me funciona solo con pantalla por encima de 1000px osea si coloco un max-width: 800px; no funciona.
osea solo funciona si minimizo el chrome pero paso a ver en modo responsive y no funciona llega a 400px y aun asi no funciona amenos que el max-width sea de 1000px en adelante, lo pase a mi telefono y tampoco reproduce el max-width de 800px y se supone que esa pantalla es de 600px.
podrian ayudarme?😞
muchisimas gracias, de mucha ayuda tu tutorial.
Excelente tutorial, gracias!
Buen día Doc. una consulta al inicio veo que colocas un @media screen and (....) pero en otro lados veo que omiten ello y colocan así @media (...) omiten el escreen pero no entiendo cual es la diferencia, espero me pueda responder, de ante antemano muchas gracias.
Excelente tutorial amigo, lo que no entiendi cuando se trabaja con medias si debo modificar en la reso dicha o hacerlo con unos pixeles menos de los ya declarados
en media queries es para activar parametros puede hacer la pagina web normal para pc y luego lo adapta a media queries y lo hace de nuevo pero ya con memdidas de celular o tablet
Excelente video! cortito y al pie!
Muchas gracias :)
Excelente explicación. Gracias!
Muchas gracias bro!
Muchas gracias. ¿cuál extensión instaló para poder ver los diferentes formatos de su página web en Internet? Me parece más preciso que estar solamente encogiendo y agrandando la ventana del navegador.
Hola Daniela! En las herramientas incluidas de los navegadores puedes cambiar la vista a móvil para poder manejar diferentes formatos de pantalla y ver si el sitio se acopla, para no tener que estar cambiando el tamaño de la ventana del navegador
@@vidamrr Excelente, ya lo encontré. Muchas gracias! :D
Exelente explicacion 🤗
Excelente video, gracias!
buena explicación gracias!!!
Hola Marcos! Tengo una duda, a mi no me salia, osea no cambiaba de fondo de color a un div, pero le puse @media only screen.... Tiene algo que ver el ONLY? Para que sirve? Gracias y bueno video.. agradeceria que hagas uno con muchos divs y no solo cambiar de color si no poner un div debajo del otro. saludoss
puedo hacer un ejercicio más complejo para explicar bien el concepto. El término de oNLY es un poco confuso pero se usa para delimitar los queries
andas por ahi todavia,necesito ayuda.No necesitas incluir un link the media query o algo para q funcione?
no, de hecho no
@@vidamrr Hola gran video. Me surgió una duda que es mejor para hacer media queries ¿Usar % o px?
Necesitas colocar la etiqueta de viewport en el HTML según yo.
@@baskcuber el viewport es otro de los pilares del Responsive Design, que es el mobile first... es como una ampliación de los media queries... cuando tu pones el clasico
le estas diciendo a los navegadores que el ancho de pantalla, es el ancho real del dispositivo (por ejemplo que los celulares sea de 480px y no de 990px como muestran algunos), y que la escala inicial sea 1...
Esto es independiente de los Media Queries que tu declares....
Por si acaso sabrás como hacer que una página no se pueda achicar más ?? , hay algunas páginas que cuando tu los vas achicando ya no se pueden achicar más y eso que solo los llegue achicar hasta la mitad , eso estoy buscando ,,, y hasta ahora no lo encuentro , no sé como lo harán
como tal no, tu puedes dimensionar una ventana y eso no se puede limitar por CSS, si lo que quieres es que ya no se redimensione más puedes especificar en los queries las dimensiones de cuando quieres que se ajuste el diseño
tengo un problema que nadie soluciona ni se menciona en ninguna parte. cuando pongo AND solo se queda en blanco como cualquier texto y cuando actualizo en el navegador nada cambia....y me aparece media query expected..no se que hacer
Buenas noches, resolviste el problema??
coloca tu querie para ver donde podria estar el error...ya que no dices que pones despues del AND
Haber, a veces solemos usar 02 archivos, uno ESTILOS.CSS OTRO RESPONSIVE.CSS; te has aserciorado si en tu INDEX.PHP estas VINCULANDO con la etiqueta ???
hola ! como creo un snippet para mediaquerie en sublime text3?? gracias de antemanno
Muchas gracias!
espero alguien me pueda responder tengo un titulo que en cierta medida desaparece y quiero que se vea de nuevo pero no encuentro la forma de volverlo a poner con media queries alguien que sepa porfavor
Muchas gracias.
por que no funciona en hojas de estilo?
Buena explicacion pero... el AND no es para ANIDAR nada.... le das enfasis como si eso significara... el AND es un operador logico y en las media queries de CSS se pueden usar el AND el NOT y el ONLY
de nuevo o gran maestro me salvas el sitio
Tengo el mismo codigo porque no me aplica nada!
Ya lo pude solucionar por si alguien le sirve el problema está que al inspeccionar los media query no se ven o se ven solo por un segundo al no tener esta etiqueta
Ya veo que esa linea es importante ya no la volvere a omitir!
El banner que esta en la pagina w3schools para ese momento, es profético. XD, el comunismo es un azote en el mundo . Por cierto, ¡Mil gracias por el tutorial! (y)
Importante leer: No se recomienda el uso de px para media queries
Si se recomienda developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries
@@vidamrr estoy hecho un lio
Es un video bien basico, no aprendi nada nuevo.... tengo que aplicar media queries en un sitio terminado.... y pues no es como que cambiar de colores te ilustre demasiado. LMAO seguire buscando mejores tutoriales.
el titulo dice "INTRODUCCION" porque no buscas media avanzado o expert no crees??? usa la lógica y no reniegues por tu misma culpa :)
Creo que la respuesta a tu comentario seria: Porque desprecias el trabajo de otro por no saber hacer el tuyo... Media Queries y BreakPoints explicados como se explico aca, es mas que suficiente para hacer lo que necesites, con tu sitio actual... El que TU no sepas o NO TENGAS la IMAGINACION para HACERLO, no es problema de los otros...
Ahora bien... ya que comentas de forma tan altanera... si no sabes que hacer con tu sitio actual, busca a alguien que si sepa...
Y no seas tan mal educado
buen aporte, muchas gracias