Hola, verán estoy desarrollando un sitio web y este debe ser responsive. Me estoy confundiendo un poco con las media query, es decir, no encuentro unas medias estándar para esto. En el momento tengo eso:
mobile-portrait: min:320px - max:479px; mobile-landscape: min:480px - max:599px; small-tablet-portrait: min:600px - max:799px; small-tablet-landscape: min:800px - max:767px; tablet-portrait: min:768px - max:1023px; tablet-landscape: min:1024px;
Para empezar no se si esas medidas están bien, si el max de cada query está bien o deber ser diferente. También creo que son demasiadas media query lo cual requiere mas código.
Lo que quiero es tener responsive para: smartphones (vertical u horizontal), tablets (vertical u horizontal) y para desktop. El ancho máximo del sitio es de 960px.
Estoy trabajando con SASS y el grid system Susy.
Pueden orientarme un poco.
Gracias.
Respuestas
Coincido con lo que dices y creo que estás complicándote demasiado. Como ejemplo te propongo que eches un vistazo a este sitio web. Prueba a redimensionar la ventana del navegador y verás que tiene cuatro diseños diferentes: 1) escritorio grande, 2) escritorio normal, tablet horizontal, 3) móvil horizontal, tablet vertical y 4) móvil vertical. Estos cuatro diseños son más que suficientes en la mayoría de los casos.
Como framework CSS utilizo Bootstrap 3, por lo que estos cuatro valores vienen ya configurados por defecto y funcionan bastante bien. Te indico a continuación los valores:
/* ESTILOS NORMALES (para móviles en vertical)
========================================================================= /
body { ... }
p { ... }
/ RESPONSIVE
========================================================================= /
/ Móviles en horizontal o tablets en vertical
------------------------------------------------------------------------- /
@media (min-width: 768px) { }
/ Tablets en horizonal y escritorios normales
------------------------------------------------------------------------- /
@media (min-width: 1024px) { }
/ Escritorios muy anchos
------------------------------------------------------------------------- */
@media (min-width: 1200px) { }
Una cosa que tienes que tener en cuenta en los estilos anteriores es que emplea una técnica bottom-up, ya que en Bootstrap 3, lo más importante es el móvil y lo menos importante es el escritorio. Así que tienes que empezar diseñando el sitio para el móvil y luego ir aumentando la ventana del navegador y añadiendo estilos donde corresponda.
Si quieres trabajar al revés, top-bottom, y empezar diseñando para el escritorio y acabar con la versión para móviles, debes dar la vuelta a todo lo anterior:
/* ESTILOS NORMALES (para escritorios muy grandes)
========================================================================= /
body { ... }
p { ... }
/ RESPONSIVE
========================================================================= /
/ Tablets en horizonal y escritorios normales
------------------------------------------------------------------------- /
@media (min-width: 768px) and (max-width: 1199px) { ... }
/ Móviles en horizontal o tablets en vertical
------------------------------------------------------------------------- /
@media (max-width: 767px) { ... }
/ Móviles en vertical
------------------------------------------------------------------------- */
@media (max-width: 480px) { ... }
Esta segunda forma de trabajar parece más lógica, pero todos los frameworks CSS buenos se han pasado a la primera forma. Así que si quieres estar preparado para el futuro, te recomiendo la primera forma. Eso sí, si no estás acostumbrado a trabajar así, al principio te va a costar bastante y te van a entrar dudas de si continuar así o pasarte a la forma tradicional de trabajar.
@javiereguiluz
Hola Javier, muchas gracias por tu respuesta, me ayudas un montón.
Entiendo lo del bottom-up o mas conocido como mobile first, y es el principio de Susy, y así lo estoy trabajando.
Siguiendo las medidas de Bootstrap 3, yo sólo necesito el estilo de escritorio normal, no hay diferencia con un escritorio mas grande, a lo que me salta la duda: ¿cuál sería el min-width para tener los tres media query sacando el escritorio grande? ¿480px o 320px?
Gracias.
@ramiroanacona
Si no utilizas un diseño especial para escritorios grandes, simplemente debes eliminar la última media query del estilo mobile-first que te indicaba antes. El resultado sería algo así:
/* ESTILOS NORMALES (para móviles en vertical)
========================================================================= /
body { ... }
p { ... }
/ RESPONSIVE
========================================================================= /
/ Móviles en horizontal o tablets en vertical
------------------------------------------------------------------------- /
@media (min-width: 768px) { }
/ Tablets en horizonal y escritorios
------------------------------------------------------------------------- /
@media (min-width: 1024px) { }
Respecto a la duda sobre 320px o 480px, en realidad no importa. Con estos estilos, cualquier resolución inferior a 768px se va a tratar como un móvil en vertical. Esta es la mejor opción hoy en día dada la gran resolución que tienen la mayoría de móviles.
@javiereguiluz
Hola Javier, comprendo, ahora está pasando algo curioso:
Tengo estas directivas:
@media (min-width: 768px) { width: 23.72881%; float: left; margin-right: 1.69492%; } @media (min-width: 1024px) { ... }
Si redimensiono la pantalla a menos de 768px los estilos de la primera directiva no se aplican.
@ramiroanacona
El primer error que veo, que quizás es cosa del copia+pega, es que dentro del media query no has añadido ningún selector, por lo que es normal que los estilos no se apliquen.
Suponiendo que lo del selector sea un despiste, en realidad el problema que estás teniendo es normal. Ya te había avisado de que al principio es un lío trabajar así ;)
El código CSS que has puesto se interpreta así:
Si la pantalla tiene 768 píxeles o más de anchura
width: 23.72881%;
float: left;
margin-right: 1.69492%;
Si la pantalla tiene 1024 píxeles o más de anchura
...
Así que en tu caso los estilos que deberías utilizar son los siguientes:
#content { width: 23.72881%; float: left; margin-right: 1.69492%; } @media (min-width: 768px) { #content { // estos estilos se aplican en tablets + desktops }
} @media (min-width: 1024px) { #content { // estos estilos se aplican sólo en desktops } }
@javiereguiluz
Hola Javier, si, era error de copy and paste, muchas gracias por aclarar mis dudas.
Voy a probar y te cuento.
@ramiroanacona
Javier muchas gracias tus respuestas fueron de gran ayuda he solucionado mi problema.
@ramiroanacona
Saludos que pasa se que este post ya es un poco viejo pero que temgo un gran problema. Empiezo diseñando con el principio mobile first con las medidas que pusiste Javier abre la consola de desrrollo de Chrome y desde ajusto mis query, empiezo con la medida estandar que viene que es del iPhone 5 luego paso asi a tablet y luego a tablet landscape/escritorio . El problema viene cuando salgo del "emulador" de dispositivos de Chrome y hago la ventana mas pequeña el resultado es que respeta los estilos que puse pero se ve fatal en escritorio cada vez que la hago pequeña los estilos que se aplican son como si fuera en un dispositivo y no en escritorio. No se si me explique bien. Me pregunto si hay un modo de usar queries para que css me identifique si estoy viendolo desde un dispositivo portátil llamese smartphone o tablet o desde una pc. He investigado creo que se pueden unir varias condiciones en un query "@media only screen..." pero no estoy seguro. Como veran nomsoy un experto en el tema de antemano muchas gracias por cualquier tipo de ayuda. Gracias
@CarlosMore117
Muchas Gracias, estoy diseñando una web y estoy en el proceso de hacerla responsive, así que, necesitaba las medidas y esto me ha estado sirviendo gracias ^.^
@yYoshuaG
Hola, en realidad quiero hacer una pregunta sobre todo lo que estan hablando, estoy intentando actualizarme con el web design (responsive) despues de un largo tiempo inactiva, cuanto deberia medir una imagen, que deba verse bien en una pantalla de alta defincion grande de una computadora, sin importar las medidas de la pantalla, y teniendo en cuenta que el tamano lo dara el css o lo que sea, pero la imagen que yo creo tiene un tamano real en pixel, cuanto seria la mayor dimension en px sin estar perdiendo eficiencia? no se si se entiende
@CAMINOdeIDA