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».
Demostración
- Ver demostración (Redimensiona el navegador horizontalmente para ver el efecto del uso de «media queries»)
HTML
El primer paso es crear el HTML de la página. Este código es un ejemplo muy básico de HTML5, con una cabecera con una imagen de fondo y un texto con una imagen. Copia el siguiente código y guárdalo como index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="iso-8559-1"> <title>Atrioweb. Demostración</title> <link href="estilos.css" type="text/css" rel="stylesheet" media="screen"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> </head> <body> <div id="container"> <header> <h1><a href="#">Atrioweb</a></h1> </header> <div id="content"> <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> <p><img src="catedral.jpg" alt="Foto de la Catedral"></p> <p>Integer faucibus, augue vitae vulputate sodales, tellus tellus vulputate tortor, in iaculis ipsum orci vitae libero. Vestibulum laoreet accumsan erat vel pretium. Ut turpis elit, ultricies id accumsan non, condimentum feugiat neque. Nam ut erat urna, a porta augue. Donec vel porttitor magna. Cras eget tortor eget ante malesuada sodales sed a leo. Fusce sit amet cursus sem. Nulla aliquet accumsan ante sit amet condimentum. Morbi varius porta sapien nec iaculis. In gravida velit at nulla imperdiet varius.</p> </div><!-- #content --> <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> </div><!-- #container --> </body> </html>
CSS
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:
*{
margin:0;
padding:0;
}
body{
background:#f5f5f5;
font-family: Arial, sans-serif;
font-size:13px;
line-height:1.6em;
color:#444;
}
p{
margin:15px 0;
}
h2{
margin-top:20px;
}
#container{
background:#fff;
border-left:1px #ddd solid;
border-right:1px #ddd solid;
border-bottom:1px #ddd solid;
width:600px;
margin:0 auto;
}
header h1 a{
text-indent:-9999px;
display:block;
width:600px;
height:98px;
background:url(image-med.jpg) no-repeat 50% 0;
}
#content{
padding:0 15px;
}
footer{
text-align:center;
width:100%;
display:block;
font-size:11px;
}
img {
max-width:570px;
}
De esta forma, si visualizas index.html mediante un navegador en tu PC verás algo similar a esto:
Uso de media queries CSS3 para modificar la estructura de la página en función del tamaño de la pantalla
Si se observa la página creada con una pantalla de PC con una resolución muy superior a 800x600px, se podría pensar que la estructura de la página es muy pequeña, es decir, que el espacio que ocupan los contenidos es muy reducido con relación al espacio disponible en la pantalla. Por el contrario, si se visualiza con el navegador de un teléfono móvil, la estructura de la página podría resultar demasiado grande y escaparse de los límites de la pantalla, provocando que aparezca una barra de desplazamiento horizontal, lo que sin duda dificulta la lectura y observación del contenido.
Aquí es donde entra en acción la técnica de los «media queries». Gracias a ella podemos modificar el modo en que se visualiza la estructura de la página en distintos dispositivos.
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:
@media screen and (min-width:1200px){
img {
max-width:1000px;
}
#container{
width:1100px;
}
header h1 a{
width:1100px;
height:180px;
background:url(image.jpg) no-repeat 0 0;
}
}
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.
Como puede apreciarse, la implementación de esta técnica es bastante sencilla. @media screen {} es una regla CSS3 «media query» que indica al navegador que los nuevos estilos definidos entre los corchetes deben aplicarse sólo a la visualización en pantalla (no cuando se imprime). Y and (min-width:1200px) especifica que dichos estilos sólo se mostrarán si la ventana es mayor de 1.200 píxeles.
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.
Después de crear esta regla «media query» de estilos para las grandes pantallas, ahora vamos a definir una nueva regla destinada a las pantallas de los teléfonos móviles. Copia y añade el siguiente código al final de estilos.css:
@media screen and (max-width:600px){
img {
max-width:290px;
}
#container{
width:auto;
}
header h1 a{
width:auto;
}
}
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:
@media screen and (max-width:320px){
img {
max-width:200px;
}
#container{
width:auto;
}
header h1 a{
width:auto;
height:52px;
background:url(image-small.jpg) no-repeat 50% 0;
}
}
Imágenes
Destacar por último que el código original CSS y las sucesivas redefiniciones del mismo a través de las reglas media query incluyen la readaptación del tamaño original de la imagen incrustada en el texto a través de reglas max-width. De esta forma, la imagen catedral.jpg, con un tamaño real de 640x480px, se muestra más pequeña y queda bien encajada en los límites del div .container en el caso de que la página se visualice en pantallas medianas o pequeñas.
Navegadores que implementan las «media queries»
La ténica de los media queries es aceptada ya desde hace algún tiempo por la mayoría de los «buenos» navegadores (entendiendo por «buenos» todos excepto Internet Explorer). Como siempre, Microsoft ha tardado mucho más en unir IE al grupo de navegadores que aceptan esta técnica, y sólo lo hace en la versión 9:
- Safari 4+
- Chrome 4+
- Firefox 3.5+
- IE9+
Dado que el uso de IE en los móviles es cada día más residual, en mi opinión la técnica de las «media queries» está lista para ser cada vez más ampliamente utilizada en el desarrollo web.
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.
Pongo un ejemplo:
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.
Como lo ves tu?
Veo que tienes razón…como haces tú para hacer responsive?
Ese problema se solucciona poniendo dentro de la etiqueta
+info –> https://www.w3schools.com/css/css_rwd_viewport.asp
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 sercontent="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 ejemplocontent="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.
para móviles con mucha resolución se puede usar la media query
-webkit-device-pixel-ratio
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
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.
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.
Saludos
Victor
Gracias Víctor 🙂
excelente informacion gracias
🙂
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)
Muchas gracias!!
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:
http://detectmobilebrowsers.com/
Supersencillo de implementar, con ejemplos en multitud de lenguajes de programación.
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.
Saludos!
Para que poner display:block al footer? Footer es un elemento de bloque…
footeres un elemento estructural de HTML5, no es undiv#footer. En muchos navegadores antiguosfooterse mostrará inline si no se especifica como bloque en el css. Lo mismo ocurre conheader.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!
Para que la imagen se centre horizontalmente.
Gracias y un saludo
No sabeís nada de éste tema y publicáis al respecto; investiga más y luego postea…
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.
Coño! Parecía que ya no quedaban troles… manda cojo…
Enhorabuena por el artículo!
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!
http://detectmobilebrowsers.com/
Supersencillo de implementar, con ejemplos en multitud de lenguajes de programación.
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
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?.
Saludos,
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.
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?
Gracias!
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)
Muy buen aporte (y)
Gracias…
Muy buen post, la verdad es que cada día aprendo más sobre este mundo, un cordial saludo
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?
Muchas gracias
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/
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.
Excelente aporte para quienes recién empiezan a investigar sobre esto!
Gracias!
Hola David
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.
Uso el CSS Reset de Meyer, hago el diseño general y luego para las diferentes resoluciones o anchos de pantalla voy haciendo los ajustes pertinentes con las diferentes DIVs y secciones, formatos, etc. tratando de trabajar ordenadamente.
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……
hay dos divs donde una ocupa el 60 % y la otra el 40 % del ancho de pantalla.
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.
Pero qué ocurre?
En los navegadores de escritorio eso ocurre bien, pero no así en elSony Xperia que usa Chrome.
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.
En la misma página, más abajo hay una div que ocupa todo el ancho de la pantalla y no se modifica por CSS.
En esa DIV las letras se mantienen al tamaño que debe ser y se ven 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
El sitio tiene muchas otras páginas con diagramación parecida.
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.
Saludos y gracias!
Pon en el
<head>:<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">Estimado David
Gracias por tu tiempo y por tu ayuda
Sí, es así.
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!!!!!!!!!!!
🙂 Me alegro que te haya servido. A mí también me ha pasado lo mismo alguna vez.
Muy bueno el artículo.
Hay alguna tabla de medidas estándar según las cuales puedas ir creando reglas según dispositivos?
Un saludo
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.
Buenas,
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?
Muchísimas gracias.
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.
Por desgracia el soporte css en los clientes de correo es bastante limitado.
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.
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.
Muchas gracias de nuevo. 🙂
Buenas noches.
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.
Que opinas?
Un saludo
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.
Buenos dias.
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.
Un saludo
alert(‘Hola’);
Que onda!!!
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.
Que me recomiendan ?
Saludos y de ante mano gracias.
Y gracias al POST esta muy bueno, y la mayoría de los comentarios.
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.
http://css-tricks.com/box-sizing/
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
Muchas gracias me sirbio de mucho 😀
Gracias por el aporte, pero tengo una duda; para usar @media screen {} solo se debe aplicar a los selectores que contengan el atributo width?
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.
Buen articulo, gracias por el apoyo
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.Saludos y muchas gracias!
Tendrías que hacerlo cargando dos imágenes distintas en el html y luego en el CSS:
img.imagen2{display:none;}
@media (max-width: 480px) {
img.imagen1{display:none;}
img.imagen2{display:block;}
}
buenas tardes, quisiera saber porq mi media queries no funcionan, en google chrome.
este es mi codigo:
html:
Web Responsive Design
contenido
contenido
contenido
y el css:
*{
margin:0;
padding:0;
}
body{
background-color:#323A46;
font-family: Arial;
}
.contenedor{
width:80%;
margin:0 auto;
overflow:hidden;
max-width:1000px;
}
header{
background-color:#EB4A33;
margin:20px 0;
}
header h1{
color:#fff;
padding:20px 0;
text-align:center;
}
header img{
width:100%;
height:auto;
}
.main{
width:100%;
background-color:#fff;
padding:20px;
float:left;
box-sizing:border-box;
text-align:center;
}
.main img{
width:100%;
height:auto;
}
.main table{
width:100%;
height:auto;
}
.main form{
background-color:yellow;
width: 100%;
}
.main input{
margin-bottom: 10px;
width: 20%;
display:inline-block;
border:0px;
font-size:18px;
}
.main input:hover{
background-color:grey;
}
aside{
width:30%;
background-color:#ccc;
padding:20px;
float:left;
box-sizing:border-box;
}
footer{
clear:both;
float:left;
margin-top:20px;
box-sizing:border-box;
width:100%;
padding:20px;
color:#fff;
background-color:#000;
}
@media screen and(max-width:800px){
body{
background-color:blue;
}
aside{
width:100%;
}
cuando reduzco la pantalla no pàsa nada.. ayudenme por favor
Debe haber un espacio entre el and y el (), es decir debe ser:
@media screen and (max-width:800px){
A ver si va a ser eso.
Visto aquí:
http://stackoverflow.com/questions/18417409/correct-syntax-of-media-queries
y el html:
Web Responsive Design
contenido
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.
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.
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
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 .
Muchas gracias por vuestra paciencia.
Hola de nuevo:
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.
…
Gracias y un saludo.
Hola Luis Palacios,
Puedes dejar por favor el enlace de la validacion, por favor?
Sí, claro:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.afrisia.es%2F> (
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!
Gracias una vez más.
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.
Muchas gracias, pero mira lo que pasa en cuanto introduzco las 2 etiquetas, la de cierre de Head y la de apertura de Body:
Validation Output: 2 Errors
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».
Saludos.
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
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.
Gracias.
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-1252Hola, 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 ¿.
Saludos
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.
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
gracias
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") ); }
Espero te sirva
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.
Por ejemplo:
@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.
$( document ).ready(function() {
$(".full-height").height($(window).height());
});
//Detectamos si se cambia el tamaño de la ventana, para ajustar .full-height a la nueva altura.
$(window).resize(function() {
$(".full-height").height($(window).height());
});
Esto me funciona en algunos casos que height:100%; o min-height:100%; en css no tienen el efecto deseado 🙂
Espero les sirvan estos tips.
Se comio el meta de viewport en el #2 perdonen x)
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
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??
muchas garcías!
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.
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!
Muchas gracias por tu tiempo David
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
Muy interesante el articulo me ha ayudado mucho. Gracias
Los que estamos en el mundillo del diseño web diariamente sabemos la importancia de estar al día con los métodos modernos. Este artículo me vino al dedillo para actualizarme un poco más. Muchas gracias.
Muy interesante, cuando estudie css pude ver algo sobre media queries pero con el uso de bootstrap se me había olvidado como hacerlo.
Muy buen post, la verdad es que cada día aprendo más sobre este mundo 🙂
Buenas. Muy buen artículo David, ¿cuál sería para poner más alto cuando la pantalla sea menor que 1185px por ejemplo?
Muchas gracias.
muy buen post
Muy bueno esta técnologia la estoy usando actualmente en mis proyectos, es genial
Sigue así David!
Buen aporte
Es un poco viejo este post, pero aun así me ha funcionado a lo verga
Buena viejo
Lo compartiré en mi grupo. Gracias.
Excelente aporte. Aclare por fin todas mis dudas. Mil gracias.
Hola excelente post, utilicé el cambio del viewport, pero en mi caso necesitaba que fuera con un ancho en px específico, lo hice de esta forma $(‘meta[name=viewport]’).attr(‘content’, ‘width=1200px, initial-scale=1’); y me funciona bien en Chrome pero no en Firefox, a alguien le ha pasado esto?