Que medidas se usan para responsive desing? me ayudan con esto!

pembe180 · #1 (**permalink**) 02/04/2013, 08:30

yo tengo una duda con las medidas..

viendo esta pagina awwwards.com ellos manejan una medida de 1751px (me sale en mi pantalla de 24) y otra de 1423px en modo normal...

mi pregunta es que yo quiero que mi pagina se note a 1751 y 1423, pero no se a que otras medidas tengo que yo hacerle para el responsive desing...

viendo mediaqueri.es ellos muestran 4 imagenes, 1 para movil otra tablet y otra para monitor y una ultima para monitores mas grandes conservando siempre la medida de la tercer imagen...

mi pregunta es si me ayudan con esas medidas, para saber a que tamaños debo hacer mi responsive desing ya que no se que medidas son las mas utlizadas para un movil o una tablet o un portatil o una pantalla...que medidas usas tu?
gracias

pzin · #2 (**permalink**) 02/04/2013, 09:25

Cita:

Iniciado por pembe180

yo tengo una duda con las medidas..

viendo esta pagina awwwards.com ellos manejan una medida de 1751px (me sale en mi pantalla de 24) y otra de 1423px en modo normal...

mi pregunta es que yo quiero que mi pagina se note a 1751 y 1423, pero no se a que otras medidas tengo que yo hacerle para el responsive desing...

1751, qué medida más rara.

De cualquier forma en el RWD lo que se suele hacer es poner varias medidas, luego cada "diseño" se aplica desde o hasta una medida. Y al final lo que tienes son "bloques" de medidas, por ejemplo, de un ancho de 0 hasta 320 pixeles, de 321 hasta 520, etc.

Y al final las medidas que debas de poner dependerán del propio diseño. No hay un standart a seguir. Sobre todo para las dimensiones más grandes.

Cita:

Iniciado por pembe180

mi pregunta es si me ayudan con esas medidas, para saber a que tamaños debo hacer mi responsive desing ya que no se que medidas son las mas utlizadas para un movil o una tablet o un portatil o una pantalla...que medidas usas tu?
gracias

Yo me suelo guiar por esta tabla. A partir de ahí ya decides y ves qué es mejor según lo que vayas haciendo.

pembe180 · #3 (**permalink**) 02/04/2013, 09:39

ok..
lo que pasa es que siempre veo que hacen paginas tomando base los 960 px y no me gusta ver el aire que sobra a la derecha y izquierda, por eso queria tomar una medida mas grande y ir haciendole reduccion..

no tienes una tabla para portatiles y resoluciones de pantalla escritorio..o cual seria la que mas usas tu!
gracias

pzin · #4 (**permalink**) 02/04/2013, 10:03

Cita:

Iniciado por pembe180

no tienes una tabla para portatiles y resoluciones de pantalla escritorio..

Tienes que pensar en el RWD como un diseño líquido usando medidas relativas, que luego se adapta según una escala de resoluciones.

Aquello de las páginas de 960 pixeles, es una cosa que está ahí debido a que existía una estandarización no escrita, como en su día lo fueron los 770 pixeles cuando reinaban las resoluciones de 800x600.

Una página con medidas porcentuales por ejemplo, no necesita que se especifiquen 960 pixeles, ni ahora ni antes.

La cuestión es que tienes que cambiar tu forma de trabajar a medidas relativas. Si quieres dos columnas, pues no especifiques dos de 480 (960/2) sino dos de 50%. Si necesitas que tengan un mínimo de 500 pixeles, entonces para resoluciones menores de 1000 pixeles, especifica que tengan un ancho de 100%. No sé, todo es meterse un poco e ir haciendo pruebas.

pembe180 · #5 (**permalink**) 02/04/2013, 10:37

y la pregunta del millon..
que se ajuste a toda medida de monitor como seria?
o tu que me recomiendas que use. framework? o lo haga desde cero?

pzin · #6 (**permalink**) 02/04/2013, 11:21

Cita:

Iniciado por pembe180

que se ajuste a toda medida de monitor como seria?

Si quieres que algo se adapte al 100%, ponle un ancho del 100%.

Cita:

Iniciado por pembe180

o tu que me recomiendas que use. framework? o lo haga desde cero?

Para usar un framework, tienes que empezar a usar de cero ese framework. Quiero decir, para usar un framework también requieres de al menos un poco de aprendizaje.

Yo personalmente no uso frameworks para CSS. Pero la gente que los usa están contentos. Así que es una decisión más bien personal. No obstante, creo que un framework para webs sencillas es sobrecargar las cosas.

pembe180 · #7 (**permalink**) 02/04/2013, 14:42

amigo esta es la estructura de lo que quiero hacer

http://imageshack.us/photo/my-images/844/bocetoe.jpg/

pero no allo como empezar!

pzin · #8 (**permalink**) 02/04/2013, 14:53

Pues lo que tienes que hacer, en vez de usar medidas absolutas, es usar medidas relativas.

pembe180 · #9 (**permalink**) 02/04/2013, 14:56

me puedes dar un ejemplo!

pzin · #10 (**permalink**) 02/04/2013, 15:00

¿Ejemplo? ¿De qué? ¿De cómo usar medidas relativas?

pembe180 · #11 (**permalink**) 02/04/2013, 15:04

si compadre

willycarp · #12 (**permalink**) 04/04/2013, 06:16

Pembel te recomiendo leer esto http://librosweb.es/css/capitulo_3/u...de_medida.html

Esta muy bien explicado que son las medidas relativas y absolutas y creo que te va a servir para aprender a usarlas!

Saludos

flotus1 · #13 (**permalink**) 06/04/2013, 23:21

Vos quieres adaptar tu sitio a todas las resoluciones ? Creo que vas a tener que investigar muy a fondo del HTML5, hay un metatag para que se adapte a todas las resoluciones

http://www.htmlcinco.com/etiqueta-meta-viewport-web-movil/

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

y vas a tener que leer un poco de css para que te indique como usar el min-height y min-width, para que se acomode las imagenes cuando la resolucion sea menor, no solo la imagen sino todo el contenido de la web que estas haciendo ;)