Source: https://www.atrioweb.com/blog/css3/uso-de-media-queries-css3-en-la-creacion-de-paginas-web
Timestamp: 2019-09-22 08:51:40+00:00

Document:
Uso de “media queries” (CSS3) en la creación de páginas web | Atrioweb blog
Auditoría de posicionamiento (SEO) de un sitio web →
Uso de “media queries” (CSS3) en la creación de páginas web
Publicado el 09/06/2011 por David
La creciente utilización de pantallas de PC de gran tamaño y la extensión del uso de internet en los móviles obliga a los webmasters a ser capaces de crear páginas webs que se muestren correctamente y sean funcionales en cualquiera de los dispositivos que sean visualizadas. Hasta hace unos pocos años, esto sólo era posible en la práctica con el uso de estructuras “fluidas” (usando porcentajes para definir el ancho de la web respecto a la pantalla), pero con la creciente aceptación por los navegadores de CSS3, ya es viable en la práctica el uso de una novedosa técnica: las “media queries”. En el siguiente tutorial, desarrollado a partir de un ejemplo publicado en Cats Who Code: Create an adaptable website layout with CSS3 media queries, se mostrará cómo crear una web que se visualiza de forma distinta en función del ancho de la pantalla, gracias al uso de “media queries”.
<title>Atrioweb. Demostración</title>
<link href="estilos.css" type="text/css" rel="stylesheet" media="screen">
<h1><a href="#">Atrioweb</a></h1>
<h2>Granada, España</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula massa. Donec consequat, risus nec viverra condimentum, elit velit dignissim dui, id congue sapien leo tincidunt est. Mauris consectetur tempus lorem id aliquet. Proin eu faucibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In magna ligula, ornare sed posuere faucibus, consequat ac lacus. Fusce sodales fermentum nibh, a imperdiet nisi bibendum eget. Donec gravida iaculis sapien eu consectetur. Curabitur id augue augue. Nam mauris urna, suscipit eget faucibus sit amet, mollis vitae felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris ipsum lectus, imperdiet id aliquam nec, vulputate vitae mauris. Integer gravida, neque eu placerat egestas, urna metus bibendum nisl, quis congue felis velit id diam. Quisque non tortor at turpis facilisis placerat quis sed felis. Ut eget ipsum dolor, id lacinia leo. Vivamus vitae blandit libero. Integer ultricies gravida leo quis lobortis. Morbi ultrices risus vulputate magna dignissim sed ultricies arcu tristique. Sed non facilisis sapien.
<p><img src="catedral.jpg" alt="Foto de la Catedral"></p>
<footer>Demostración desarrollada por <a href="http://www.atrioweb.com">Atrioweb</a> a partir de un ejemplo de <a href="http://www.catswhocode.com">CatsWhoCode</a></footer>
El siguiente paso es añadir una hoja de estilos CSS a la página, vinculándola desde la sección head de la web. Copia el siguiente código y guárdalo como estilos.css en el mismo directorio donde has puesto el index.html:
background:url(image-med.jpg) no-repeat 50% 0;
De esta forma, si visualizas index.html mediante un navegador en tu PC verás algo similar a esto:
En primer lugar vamos a modificar la forma en que se muestra la página en pantallas muy grandes. Para ello cogemos el archivo estilos.css y añadimos al final lo siguiente:
Después de insertar este código, si visualizas de nuevo la página en una pantalla de navegador mayor de 1200 píxeles, verás que las dimensiones de la estructura de la página y de la foto de cabecera son mucho mayores que los definidos en el archivo estilos.css original. Y lo que es más interesante: si pinchas en la esquina inferior derecha del navegador para redimensionar su ventana, verás que si la pantalla se reduce por debajo de 1.200 píxeles, la estructura de la página cambia, adaptándose a la nueva dimensión.
Esta regla “media query” y sus estilos definidos entre los corchetes están situados al final del archivo estilos.css, así que lo que hacen es redefinir (sobreescribir) los estilos definidos anteriormente. Las propiedades de las etiquetas HTML definidas con anterioridad a la nueva regla @media screen {} y que no se redefinen entre los corchetes se mantienen intactas.
La nueva configuración de estilos puede visualizarse no sólo en la pantalla de un teléfono móvil sino también en el navegador de PC si ajustamos la ventana a un tamaño no superior a 600px. Sin embargo, dada la variedad de tamaños de las pantallas de los teléfonos móviles, esta configuración puede valer para los smartphones con grandes pantallas, pero puede resultar excesiva para los móviles con pantallas de ancho menor a 320px, por lo que vamos a definir una nueva regla para éstos:
background:url(image-small.jpg) no-repeat 50% 0;
Esta entrada fue publicada en CSS3. Guarda el enlace permanente.
85 respuestas a Uso de “media queries” (CSS3) en la creación de páginas web
Luis Miguel Romero dijo:
02/11/2011 en 12:52
Lo de las media querys está muy bien, pero creo que hay algo que no se tiene en cuenta, a mi modo de ver.
Yo creo que la resolución no basta para adaptar un diseño (p.ej. a un smartphone) deberíamos considerar también el tamaño de pantalla.
Netbook con 10″ de pantalla y 1024x600px de resolución.
Smartphone con 4″ de pantalla y misma resolución.
Si tomamos p.e un limite de 800px minimo para adaptar el contenido, tendremos que un netbook el contenido será perfectamente legible, mientras que un smartphone no lo creo, ya que la pantalla será muy pequeña.
05/09/2019 en 21:08
Veo que tienes razón…como haces tú para hacer responsive?
02/11/2011 en 18:14
Luis Miguel Romero, el problema que planteas es de gran interés pero de difícil solución.
Hay una solución no del todo satisfactoria, que consiste en combinar la utilización de media queries con la etiqueta meta ‘viewport’, que permite determinar el nivel de zoom inicial (y máximo) del navegador en los smartphones.
En el ejemplo de ‘media queries’ expuesto en esta página se utiliza la etiqueta meta ‘viewport’ pero no se comenta (para no complicar demasiado la explicación). [Mi intención es dedicar un artículo específico para explicar el uso de la esta etiqueta, introducida por Safari en los iPhones y que ha sido aceptada y extendida rápidamente por el resto de navegadores y S.O. para móviles.]
Baste comentar aquí que el principal atributo de meta ‘viewport’ es content="width=...". El valor de width puede ser content="widt=device-width", o ser establecido en píxeles. En el primer caso, el ancho definido en el media query será el ancho en que se mostrará la página web en la pantalla, mientras que si se utiliza por ejemplo content="width=300", entonces el ancho de la web que se mostrará en la pantalla inicialmente será de 300px.
Así pues, si a pesar de utilizar ‘media queries’ creemos que el ancho de la web que se va a mostrar por defecto en la pantalla del smartphone a a ser ‘muy grande’ y por tanto la web se va a ver ‘muy pequeña’, podemos utilziar meta ‘viewport’ para corregirlo.
Sin embargo, el remedio puede ser peor que la enfermedad, ya que si forzamos que se muestre sólo una parte de la web, entonces el usuario se verá obligado a desplazarse horizontalmente para leer el contenido.
Por ello, creo aconsejable que el meta ‘viewport’ inicial coincida con el ancho de la web y que luego el usuario decida si quiere utilizar el zoom para aumentar la web.
14/04/2012 en 18:54
para móviles con mucha resolución se puede usar la media query
que para el iphone 4 y 4s (yo creo que son los que más resolución tienen de momento, que es 960×640) el valor sería 2.0
así, si combinamos las de anchura con las de densidad de pixels, se podrían hacer css distintos para pcs y para móviles
16/04/2012 en 14:15
El problema es que -webkit-device-pixel-ratio no tiene su correspondiente estándar y que en Android y en iOS su implentación es distinta, es decir, los resultados son distintos.
En definitiva, las respuestas al problema de especificar estilos distintos en función las diferentes resoluciones de pantalla mediante media queries está aún un poco verde.
06/08/2012 en 10:46
Me parece una solución adaptada a los tiempos actuales y de un gran interés, enhorabuena por el aporte y seguramente lo usaremos en la versión móvil de nuestra web.
12/08/2012 en 12:24
avisoya dijo:
17/09/2012 en 22:20
18/09/2012 en 10:47
20/10/2012 en 03:52
Es una tecnica que va a ser sumamente explotada … sin embargo, me surge una inquietud: como procederiamos si quisieramos utilizar una plantilla html con sus estilos para verla en una computadora de escritorio o notebook; y otra distinta para un dispositivo mobil con menor resolucion.
Cito un ejemplo practico para que quede mas claro: existe una cierta pagina web para mostrar noticias (por decir algo), con una sidebar que contiene otra informacion no tan relevante … en la computadora de escritorio deseo mostrarla de manera completa, pero en un smartphone puedo prescindir de la sidebar, de hecho, seria lo ideal y es lo que busco.
De que manera podriamos lograrlo (considerando que ocultar la sidebar mediante reglas de css como display:none; no seria lo correcto)
21/10/2012 en 10:17
Efectivamente Luis, para hacer lo que quieres las mediaqueries CSS3 no te sirven, porque funcionan en el lado del cliente, por lo que necesitas un script que detecte si el dispositivo es móvil o no en el lado del servidor. Yo utilizo este:
Supersencillo de implementar, con ejemplos en multitud de lenguajes de programación.
14/01/2013 en 22:17
Bueno de hecho sí es posible, basta que al detectar el media query de la resolución de un iPhone por decirlo así, escribas un display: none; o un display: block según sea el caso.
29/10/2012 en 14:24
Para que poner display:block al footer? Footer es un elemento de bloque…
29/10/2012 en 14:39
footeres un elemento estructural de HTML5, no es un div#footer. En muchos navegadores antiguos footer se mostrará inline si no se especifica como bloque en el css. Lo mismo ocurre con header.
29/10/2012 en 17:53
Muchas gracias por la respuesta y por este excelente artículo. Una cosa más, para que sirve 50% 0 al posicionar la imagen de fondo (image-med.jpg), saludos!
29/10/2012 en 18:08
Para que la imagen se centre horizontalmente.
17/12/2012 en 20:28
No sabeís nada de éste tema y publicáis al respecto; investiga más y luego postea…
18/12/2012 en 11:23
Hombre, señor diablo, algo de esto sí que sé. Aparte de que aquí hay otros comentarios de tono bastante distinto al tuyo, pásate por la sección Trabajos de nuestra web y le echas un vistazo. Otra cosa es que tú seas mucho más listo, pero eso tendrías que demostrarlo en vez de empezar por cacarear sin aportar nada más.
:-| dijo:
04/03/2013 en 20:02
Coño! Parecía que ya no quedaban troles… manda cojo…
23/12/2012 en 04:34
David recién acabo de leer tú artículo y los comentarios,perdona la pregunta como utilizas detect mobile browers, estoy interesada en el punto que Luis toco acerca de la barra,saludos!
26/12/2012 en 11:53
elena infante dijo:
28/02/2013 en 13:23
Ummm, gracias. Estoy un poco anticuada en cuanto a maquetacion web. Con este ejemplo que has ùesto comenmzara a darle caña al responsive design.
Pingback: Recursos: Responsive web design | Proyectos de Gráfica Publicitaria
08/04/2013 en 23:16
Hola que tal, me parece que es un post sencillo pero muy bien explicado. Felicidades David. Duda: Al momento de leer tu post y me leo que redimensionas las imágenes en las reglas css para moviles me surge la siguiente pregunta. Si yo tengo una imagen de 1200 x 768px (solo por poner un ejemplo), y la redimensiono a 600 x 324, esto sólo afecta en la presentación de la misma, cierto?. es decir, el peso de la imagen sigue siendo el mismo. Sé que hoy en día muchos se conectan con sus dispositivos moviles a traves de wi-fi, y la cantidad de datos consumidos a traves de esta no importa. El punto es ¿cómo puedo manipular el peso de mis imágenes en relación al tamaño pata optimizar los tiempos de descarga?.
10/04/2013 en 10:54
Javier, este asunto que planteas de la optimización de imágenes es de gran importancia, pero lamentablemente hoy por hoy no hay una respuesta clara y definitiva al mismo.
En el caso de las imágenes de fondo -las que se definen en el CSS- lo ideal es definir inicialmente en el CSS la imagen más pequeña y luego mediante los mediaqueries ir redefiniéndolas para pantallas más anchas. Así se conseguirá que sólo se carguen las imágenes de fondo más grandes en los casos en que sea necesario.
Sin embargo, en el caso de las imágenes incrustadas en el html, la fórmula anterior (vía CSS) no es posible. Las fórmulas actuales más eficaces para servir imágenes distintas según el dispositivo están basadas en Javascript y el uso de la caché del servidor, como por ejemplo Adaptive Images.
Para ahondar más en el ausnto, échale un vistazo a:
http://speckyboy.com/2012/11/20/responsive-image/
http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images
En este último artículo, titulado 8 recomendaciones y una regla para imagenes ‘responsivas’, el autor, tras exponer las recomendaciones, señala como ‘regla’ final: “Hagas lo que hagas, ten en cuenta que quedará obsoleto en unos pocos años”. Y es que existe un amplio consenso en la comunidad de desarrolladores acerca del hecho de que los estándares web actuales no valen para enfrentarse a este problema, y de que por tanto deberá desarrollarse una nueva especificación de estándares que permita resolver este asunto.
02/05/2015 en 10:54
Hola! Muy buen artículo, pero tengo una duda: Al ir reemplazando la imagen de fondo con media-queries, (en resoluciones altas) ¿se cargan todas las imágenes de fondo que se fueron llamando con background-image, o solo la que le corresponda a la resolución actual?
02/05/2015 en 13:33
Hola Mariana. Muy interesante tu pregunta. La respuesta es no, sólo se cargan las imágenes correspondientes a la resolución actual del media-query:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/ (Test 5)
Que buen artículo, muchas gracias!!! (Casualmente es justo lo que estaba buscando cuando llegué a esta página, no podía encontrar esta info por ningún lado)
12/05/2013 en 00:38
31/05/2013 en 16:46
Muy buen post, la verdad es que cada día aprendo más sobre este mundo, un cordial saludo
Charm dijo:
09/08/2013 en 20:33
sigo un poco confundida, la explicación está super bien pero aún no entiendo la dif entre el uso de viewport y media queries por ejemplo si en mi viewport mi width=device-width no se supone que ya con eso los elementos se adaptan perfectamente y ya no hay necesidad de hacer un media query para ese tamaño de pantalla?
24/08/2013 en 01:57
Puedes obtener una aclaración acerca del uso del meta viewport en la siguiente dirección. Espero que te sea de ayuda:
http://activ.com.mx/introduccion-a-media-queries-con-css3/
LUYS31 dijo:
15/08/2013 en 21:00
Un artículo fantástico. Estoy intentando adaptarme a la programación para dispositivos móviles y lo cierto es que me ha parecido sencillo y de gran ayuda. Gracias.
18/11/2013 en 21:43
Excelente aporte para quienes recién empiezan a investigar sobre esto!
26/11/2013 en 15:32
Voy por mi segundo diseño web adaptable y lo he probado en IE, Chrome, Opera, Safari y Firefox y en todos se comporta muy aceptablemente.
El problema es con algunos smartphones no muestran adecuadamente los elementos como los muestran los diferentes navegadores que mencioné arriba.
Por ejemplo, tengo una página del sitio de un cliente donde……
Para tamaños de pantallas de smartphones como el Sony Xperia hice que esas divs sean del 98 % con padding derecho e izquierdo de 1%, y así se deberían acomodar una sobre la otra.
En ese smartphone las divs siguen siendo de los anchos originales de 60 y 40, ¡¡¡como el smartphone si no hiciese caso de la hoja de estilos!!!!! (y la CSS está correctamente enlazada). Consecuentmente las letras se van más chicas y no se leen bien.
Los colores y otros formatos salen bien, pero es como que para ciertas cosas el smartphone le hace caso a algunas cosas de la CSS que adapta las DIV y todo el resto, pero no le hace caso a algunas otras cosas.
MI Nokia 5800 (mucho mas antiguo que el Sony en que probé el sitio) aún con sus limitaciones adapta correctamente todos los tamaños, pero no el muy moderno Sony!!!!!!
Te dejo el enlace de esa página , puede ser?
http://www.surmetalweb.com.ar/prueba/policarbonato-compacto.html
Si tuvieras algún tiempo para aconsejarme qué hacer o qué podría ser lo que ocurre te estaré muy agradecido!
Igualmente mientras tanto iré haciendo algunos cambios.
26/11/2013 en 17:24
Pon en el <head>:
02/12/2013 en 16:44
Gracias por tu tiempo y por tu ayuda
Debía agregar la bendita línea del viewport!!!!!!!!
Ocurrió que hice unas modificaciones generales, un reemplazo general y sin querer comencé a usar el encabezado sin el viewport para crear todas las páginas que siguieron a la que funcionaba bien.
Me costó 4 horas de probar y comparar probar y comparar pero lo resolví!!! Cuando desubrí mi error no lo podía creer!!
Esto a veces te vuelve loco!
Igual muchas gracias!!!!!!!!!!!
02/12/2013 en 19:04
Me alegro que te haya servido. A mí también me ha pasado lo mismo alguna vez.
26/11/2013 en 22:47
Hay alguna tabla de medidas estándar según las cuales puedas ir creando reglas según dispositivos?
27/11/2013 en 10:19
Una pregunta muy atinada, Lucas. Yo también me hice esa misma pregunta y vi que los expertos tenían distintas respuestas. Combinando las respuestas más comunes de los expertos, mi propia experiencia al hacer pruebas en los dispositivos de que dispongo, y mi propio examen de las pantallas que realmente usan los usuarios de mis webs a través de Google Analytics, actualmente suelo establecer los puntos de corte en 1200px, 991px, 767px, 480px y 360px.
28/11/2013 en 10:06
Estoy trabajando en una newsletter responsiva, que es una adaptación de una newsletter existente en la que se muestra un listado de banners de distintas ventas.
Adaptando el diseño he conseguido que sea adaptable a todos los dispositivos móviles, navegadores de escritorio y para todas las versiones de Outlook; lo cual ya está bastante bien; pero me surgen dos problemas que no se como solucionar.
1.- El primero y menos importante es que para mostrar bien las imágenes (que contienen texto) he utilizado dos tamaños de imágenes que muestro y escondo con “display: none;” según el @media, pero gmail no soporta display:none. ¿Hay algún código -webkit o algo parecido para parchear este problema? Se que lo lógico sería no colocar texto en las imágenes y que no es la solución más elegante pero es una exigencia del cliente.
2.- El cliente, después de ver el trabajo de adaptación de la newsletter, quiere mantener su antiguo diseño en escritorio (que no es responsivo) y mostrar un diseño adaptado para dispositivos móviles. En las newsletters no se pueden usar scripts como los de “http://detectmobilebrowsers.com/” para detectar el dispositivo. He probado a diferenciar con @media entre screen y handled, pero no logro hacerlo funcionar. Mi pregunta es, ¿Cómo puedo detectar que tipo de dispositivo y mostrar un estilo u otro?
28/11/2013 en 17:56
Juan Antonio, lo tuyo está complicado….
1. No hay solución idónea para hacer imagenes ‘responsivas’, y menos para mostrar vía gmail. Si no hay gran diferencia entre pequeñas y grandes, hazlas grandes y vía mediaqueries las muestras más pequeñas adaptadas a pantalla o al div contenedor.
2. Hoy por hoy es difícil o imposible detectar el tipo de dispositivo vía mediaqueries (y en el futuro creo que aún menos, dado que cada día surgen nuevos tamaños y tipos de dispositivos disitntos). Lo único que se puede detectar con cierta seguridad es el tamaño de la ventana del dispositivo donde se muestra, y a partir de ahí se puede dar un formato CSS distinto.
28/11/2013 en 23:10
Por desgracia el soporte css en los clientes de correo es bastante limitado.
29/11/2013 en 09:27
Ya lo se Lucas. Imagínate la que llevo liada para haber conseguido que funcione bien y con una apariencia parecida en Webmail, iOS y Outlook (incluyendo el ’07 que es el de mi cliente!!!). Casi todos los principales excepto en gmail.
No se si lo conocerás pero aquí puedes descargar un pdf muy completo con las compatibilidades entre propiedades CSS y lectores de correos que la verdad ayuda bastante.
29/11/2013 en 09:35
Pues muchísimas gracias David. Realmente me lo temía, pero quería asegurarme de que no hubiese ninguna solución.
Con respecto a lo de gmail es lo que me había propuesto, si el cliente se empeña en poner texto, o que cambie la forma y el estilo de colocarlos o que se vea como salga.
Y con respecto a los media queries es una pena. Después de ver lo de “handled” esperaba que hubiese la posibilidad de hacer una diferenciación por tipo de dispositivo, independientemente del tamaño de la pantalla.
28/11/2013 en 23:30
En cuanto desarrollas una web dinámica, que el cliente puede crear contenidos con un editor html como tinymce el respondí de ese contenido es difícil de controlar con todos los estilos en línea que meten.
29/11/2013 en 09:34
Por definición, los estilos en línea pisan las reglas de las hojas de estilo CSS, así que no hay nada que hacer. Lo ideal es usar un editor html ‘capado’ en el que el usuario no pueda variar dichos estilos. A cambio, hay que prepararle una varieda de estilos predefinidos (h2, h3, h4, etc) y si es posible algunas variantes para que el usuario de la aplicación se sienta cómodo.
02/12/2013 en 13:10
Hoy en el trabajao maquetando una web, me ha surgido la duda sobre los menús de la web. El tipico que despliega una lista al paso del ratón, con lo que se utilizaria la media querie handheld, para dar estilos y crear un menu diferente, pero como se comportaria en equipos de escritorio con pantalla tactil? Puedes tener un cliente un monitor de 21″ tactil como los AIO y tener espacio suficiente para un menu normal, pero en el tactil no tiene el hover.
alert('Hola'); dijo:
22/12/2013 en 06:59
ManSunDesiGn dijo:
Tengo una duda, sobre el mismo tema, pero un poco mas especifica, tengo pagina web que de adapta bien excepto en el formulario de contacto, en el dispositivos móviles no respeta la pantalla las áreas del mismo.
Y gracias al POST esta muy bueno, y la mayoría de los comentarios.
12/01/2014 en 12:55
Si quieres que los inputs ocupen todo el ancho de pantalla tienes que darles un ancho del 100% (width:100%). Si además le pones padding, te recomiendo que uses la propiedad box-sizing: border-box, así el navegador usará el antiguo modelo de caja (box-model) de Microsoft IE6- en lugar del del W3C y el input se ajustará perfectamente a la pantalla.
Porady Psychologiczne dijo:
11/01/2014 en 16:20
No se puede recomendar nada sin ver el codigo de la pagina. Pasanos la direccion.
Gracias por el apoyo, mira les dejo la página en especifico, ya que se acompla a los dispositivos móviles pero se sale.
Voy a checar lo que me comenta David.
Porady P… aquí esta
http://amartefilm.com/contactanos.php
wilmar ramirez dijo:
23/01/2014 en 16:37
Roxana Gonzalez dijo:
01/02/2014 en 16:15
Gracias por el aporte, pero tengo una duda; para usar @media screen {} solo se debe aplicar a los selectores que contengan el atributo width?
03/02/2014 en 10:44
Lo que hay dentro de los corchetes de un @media screen se refiere a las características del dispositivo en que se muestra la página, no al atributo CSS width.
Juan Soriano dijo:
27/02/2014 en 17:44
Buen articulo, gracias por el apoyo
Cristian Leal dijo:
16/04/2014 en 05:56
Hola David, muy lindo tu blog, te queria hacer una pregunta:
Que pasa si yo quisiera cambiar la imagen desde la etiqueta y no desde el css como por ejem donde se muestre la imagen1 en resoluciones mayores a 480px y imagen2 para las inferiores.
17/04/2014 en 12:31
Tendrías que hacerlo cargando dos imágenes distintas en el html y luego en el CSS:
img.imagen2{display:none;}
img.imagen1{display:none;}
img.imagen2{display:block;}
jose guardia dijo:
19/07/2014 en 16:29
buenas tardes, quisiera saber porq mi media queries no funcionan, en google chrome.
background-color:#323A46;
background-color:#EB4A33;
.main form{
.main input{
.main input:hover{
cuando reduzco la pantalla no pàsa nada.. ayudenme por favor
20/07/2014 en 20:06
Debe haber un espacio entre el and y el (), es decir debe ser:
http://stackoverflow.com/questions/18417409/correct-syntax-of-media-queries
19/07/2014 en 16:30
01/08/2014 en 00:57
Todo lo que haces en el ejemplo se puede hacer sin necesidad de media queries simplemente usando porcentajes en los anchos de tus divisiones, imagenes etc. Las media queries se utilizan mas para reposicionar esos div y hacer por ejemplo, desaparecer los menos importantes cuando la pantalla disminuye con display:none, como bien decían por ahí en los comentarios, cambiar % a divs flotantes para que en lugar de haber dos por linea pase a haber uno etc .Haciendo que parezca otra página completamente diferente en un movil a verla en un pc.
01/08/2014 en 01:26
Eduardo, el tutorial de esta página es un ejemplo básico. Por supuesto se pueden hacer mil cosas más. Todo lo que te permitan tus conocimientos de CSS, ni más ni menos. Pero desde luego utilizar display:none para ocultar contenidos no es precisamente la mejor solución.
01/08/2014 en 13:19
No me has entendido, no me refiero a que se puedan hacer mil cosas mas con css, que está claro que si. Lo que te quería decir es, que si vas a dejar en la misma posición los elementos, para redimensionarlos no hace falta media queries, simplemente le pones un width: 80% por ejemplo y se adaptará a todas las resoluciones, no hace falta crearse tres media queries para definir anchos fijos, lo comento mas que nada porque veo por los comentarios de la gente que se están confundiendo y mezclando un poco el tema adaptativo con el responsive. Por cierto display: none; para reubicar elementos y ganar espacio funciona perfectamente, pero si conoces algo que funcione mejor estoy deseando aprender. Un saludo
18/08/2014 en 13:19
Hola, estoy intentando programar una web para mi empresa utilizando HTML5 y CSS3, y aplicando los media query por las razones que quedan tan claras en este foro. Mi pregunta es muy básica, pero espero vuestra comprensión y amable respuesta: estoy intentando validar mi index con el servicio de W3C y ya sólo me da 2 errores, uno en la etiqueta de cierre que he quitado (con lo que el error ha desaparecido) y otro en la etiqueta de apertura , pues me dice que ya hay otro elemento de este tipo abierto… Me pregunto si la línea debe pasarse ahora a la sección del en vez de dejarlo en la del .
Acabo de darme cuenta de que en mi mensaje anterior no aparecen los nombres de las etiquetas que yo ponía entre sus delimitadores. Repito la pregunta:
El servicio de validación W3C me ha propuesto eliminar la etiqueta de cierre de HEAD, cosa que hasta hoy no he leído en ningún manual de HTML5. Por otro lado, me dice que da por leída la etiqueta de apertura del BODY, pero que ya existe otro elemento de esa categoría abierto, lo que me deja a cuadros porque todo lo que precede a esa línea son las cosas que todos decís que deben aparecer en el HEAD… incluyendo la META NAME.
Si alguien puede darme alguna idea para tener éxito en la validación se lo agradeceré.
Por si acaso fuese necesario, aquí pego las primeras líneas de mi index.html:
Página principal de AFRISIA IMPORT & EXPORT, S.L.
Weterynarz Ząbki dijo:
24/08/2014 en 22:18
Hola Luis Palacios,
Puedes dejar por favor el enlace de la validacion, por favor?
25/08/2014 en 11:50
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.afrisia.es%2F&gt; (
La dirección de la web es http://www.afrisia.es/
Aún estoy retocando la página de estilos, así que los colores y tamaños de las fuentes pueden no ser los idóneos.
Insisto en lo que comenté el otro día: para obtener el OK de W3C, he tenido que borrar la etiqueta de cierre de HEAD y la de apertura de BODY. Pero parece que no hay problemas al interpretarlo!
25/08/2014 en 14:11
Luis, no veo problema grave ninguno en el código de tu página. Además, yo he añadido las etiquetas de cierre de head y apertura de body y el Validador te lo valida. Y no te dejes llevar tanto por detalles tan poco importantes como un error en la validación: aunque te dé algún error de validación es mejor que mantengas bien abiertos y cerrados el head y el body. Saludos.
25/08/2014 en 14:30
Muchas gracias, pero mira lo que pasa en cuanto introduzco las 2 etiquetas, la de cierre de Head y la de apertura de Body:
Error Line 18, Column 7: Stray end tag head.
Error Line 19, Column 6: An body start tag seen but an element of the same type was already open.
Entiendo que quizás no sea imprescindible tener la validación de W3C, pero me gustaría entender por qué no voy a poder mostrar el sellito correspondiente junto con el de “CSS válido”.
25/08/2014 en 14:37
Luis, insisto en que he añadido las etiquetas a tu código y valida correctamente. El validador te está diciendo que tienes dos body abiertas. O a ver si las estás poniendo donde no es: tienen que ir debajo del meta name=viewport y antes del div#container
25/08/2014 en 18:18
David, te juro que es ahí donde pongo las 2 etiquetas, la de cierre de Head y la de apertura de Body, y que obtengo el resultado dichoso que antes envié… y por supuesto que no tengo dos Body abiertas!
¿Cómo has hecho para validar mi código tras modificarlo? Quiero decir, ¿lo descargas, lo editas y luego lo validas? Si fuese así, ¿sería una opción que me enviases mi propio código según tu versión modificada para incorporarlo yo a mi web? O si no, ¿puedo llamarte por teléfono para que me ayudes de forma directa?
Mi dirección de e-mail es lpalfab@gmail.com y mi móvil es el 687 710 755.
26/08/2014 en 12:24
Efectivamente algo raro pasa con tu validación, porque ahora sí te da el error después de poner las etiquetas que faltaban. Pero debe ser un error estúpido del validador o un problema de caracteres porque si copias todo tu código y lo validas como ‘Direct Input’ te da la bandera verde.
Deberías emplear en todo caso en el head la etiqueta meta http-equiv="Content-Type" content="text/html; charset=utf-8" y probar alternativamente con charset=windows-1252
Yomero Soyo dijo:
26/08/2014 en 04:45
Hola, creo que es muy interesante el tema, por ser la tendencia actual.
Solo una duda , ? No seria mucho mas certero, unicamente usar porcentajes en la definicion de atributos ¿.
26/08/2014 en 12:26
Por supuesto se pueden utilizar porcentajes pero ello puede dar lugar a que se desencajen de forma indeseada algunos elementos de la página, por lo que conviene estudiar bien todasd las situaciones de ancho de pantalla para ver si con porcentajes los divs encajan bien.
22/04/2015 en 13:18
hola muy buena la pagina tengo problemas co la media query que no me toma los flotados se pasan a todos las media querys me pueden ayudar yy por ende se me desarman la parte de celular
03/09/2015 en 01:26
No entiendo muy bien, pero si te refieres a que en algunos dispositivos la posición “fixed” no te funciona y se pasan a la parte media de la pantalla. Esto sucede en casos como en versiones de Safari anteriores (iPad / iPhone 1era generación por ejemplo).
Para arreglar esto, podrías utilizar algo como:
.header { position:fixed; display:block; width:100%; height:80px; padding:0; z-index:10; _position:absolute; _top:expression( ie6 = (document.documentElement.scrollTop + "px") ); }
03/09/2015 en 01:47
Al realizar sitios web responsive (con uso de media queries), se pueden hacer varias cosas:
1. Optimizar el diseño (desde que lo piensas o te pasan el PSD / AI) para ver la manera en cómo reaccionará cada elemento de la página, desde los tamaños de textos hasta el número de tablas que se van a desplegar.
Una forma que utilizo mucho ahora es generar código “de corrido” para así identificar más rápido los elementos en menos líneas de código.
@media all and (min-width:1680px) { .menu { left:50%; margin:0 0 0 -825px; } }
@media all and (max-width:1680px) { .menu { left:0; margin:0; } }
@media all and (max-width:1410px) { .menu { transform-origin: top left; top:10px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } }
De esta manera, vamos generando el responsive “a lo que pida la pantalla” enfocándonos en el “ancho” a excepción de casos que vean que se comienza a empalmar contenido flotante, etc. pueden generar lo mismo para “max-height” y “min-height”.
Esta es la forma en que yo hago mis páginas ahora, por ejemplo: ISO Outsourcing
2. Una forma menos elaborada, es colocando el meta viewport al ancho máximo de la página, por ejemplo si nuestra página es de 800 pixeles de ancho, podríamos colocarlo como:
Solamente que este método no funciona muy bien para móviles, solo para tablets, en displays de 500 pixeles de ancho y menores no se entenderá nada del texto de la página. Esto no es responsive.
3. Una forma menos elaborada y podría causar problemas (dependiendo el diseño) es manejar TODO a porcentajes. Desde los textos (depende el contenido) hasta imágenes y tablas. Así no tendrás que hacer el rollo de los media queries y se adaptará a cualquier pantalla. De nuevo, al hacerlo en porcentajes solo se adapta el contenido que tienes que podría aparecer en una pantalla 4k hasta en una pantalla de 250 pixeles de ancho. Por lo que si tu contenido es en “lista” podría funcionar, pero si tu página tiene 2 o más columnas, podría perderse el diseño o hacer que el sitio no se entienda nada.
Yo recomiendo el #1, me ha funcionado, y con algunas funciones de javascript por ejemplo utilizando algo de JQuery:
//Al cargar el sitio, cambiar la clase .full-height de cualquier elemento a que abarque el 100% de la altura de la ventana.
$(".full-height").height($(window).height());
//Detectamos si se cambia el tamaño de la ventana, para ajustar .full-height a la nueva altura.
Esto me funciona en algunos casos que height:100%; o min-height:100%; en css no tienen el efecto deseado
03/09/2015 en 01:48
Se comio el meta de viewport en el #2 perdonen x)
19/09/2015 en 23:12
Hola, me seria de muchísima ayuda alguna recomendación.Tengo un problema con mi sitio, internet explorer no lee los media query; agregue un archivo que se llama css3-mediaqueries.js, aun así no se ajusta; no se mucho de programación, por lo que no se que hacer. Gracias
21/05/2017 en 00:56
Buenas, quería comentar…
las medias queries funcionan de 10 en mi web, con distintos tamaños (móviles, tablets, ordenadores)…
ahora el problema que me surgió es el siguiente: mi jefe me pidió tener la opción de poder ver como ordenador desde el móvil.
google chrome para android tiene esta opción, pero al hacerle click recarga la pagina pero no cambia en nada el estilo! alguna posible solución o sugerencia para esto??
21/05/2017 en 13:20
Pon los media queries para moviles en un css separado, un botón ‘Ver como ordenador’ y al clickar haces que evite cargar el css con los media queries para moviles, y lo controlas con una cookie.
22/05/2017 en 06:48
gracias por la respuesta, estuve probando eso pero sin tener éxito del todo…
el problema me da algunas cosas que hago con javascript que se muestran dependiendo de la pantalla… pero sera cuestión de seguir probando…
en fin, lo que quería hacer es utilizar la opción que viene por defecto en el navegador de los dispositivos móviles…
lo e probado con otras paginas y funciona, pero con las que hago yo no… evidentemente es algo que hago mal o no tomo en cuenta, pero no me doy cuenta de que es!
Israel Barra dijo:
29/09/2017 en 23:50
Hola que tal, llevo tiempo obvestigan pues estoy haciendo una web para móviles, ahora mi problema es el siguiente, pongo el media query y cuando subo el sitio si cambio el tamaño de sitio y todo se acomoda perfecto, todo bien hasta ahí pero cuando veo la pagina web desde un movil no me lo enseña como debería simplemente se ajusta ya que las medidas las hago en % pero aun así la parte que hice de móviles no aparece en los celulares ayuda please
Juan Spalding en ¿Vas a dejar que Google te clave los cuernos el 21 de abril?

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución