Lista de media queries obligatorias?

[yoligrana]

¿Existe alguna lista de las media queries obligatorias para cualquier web responsive?

Buscando en google veo media queries "sueltas" pero no he sido capaz de encontrar una lista con los tamaños que toda web responsive necesita.

[pzin]

Depende del sitio web, depende del diseño y depende de cómo quieres que se comporte.

Aunque te digan así así y así, realmente es algo muy concreto según el proyecto. No hay ningún estándar realmente.

[yoligrana]

Iniciado por pzin

Depende del sitio web, depende del diseño y depende de cómo quieres que se comporte.

Aunque te digan así así y así, realmente es algo muy concreto según el proyecto. No hay ningún estándar realmente.

Comprendo! Qué sugieres para conocer qué media queries necesita una web?
Me gustaría partir de la base de media queries por defecto en dispositivos y, si es necesario añadir más.

[pzin]

Iniciado por yoligrana

Comprendo! Qué sugieres para conocer qué media queries necesita una web?
Me gustaría partir de la base de media queries por defecto en dispositivos y, si es necesario añadir más.

Tienes aquí una lista de dispositivos con sus tamaños de pantalla que está bastante bien: http://viewportsizes.com

[rick_sj]

Es el contenido el que debería dictar los tamaños en los que añadir media queries, no el dispositivo.

[yoligrana]

Gracias pzin por el recurso, aunque parece algo lioso, se mezclan distintos modelos con diferentes tamaños de pantalla.

Rick_sj nunca había pensado en lo que comentas. Deberíamos establecer media queries dependiendo de qué necesite el contenido, no se trata de insertar cientos de media queries.

[AngelKrak]

Iniciado por yoligrana

Comprendo! Qué sugieres para conocer qué media queries necesita una web?
Me gustaría partir de la base de media queries por defecto en dispositivos y, si es necesario añadir más.

pues estos son los tamaños que mas se asemejan a los dispositivos que usan ;)


y si ya tienes tu web puedes probarla con Resposinator y ver como queda en movil ;)

[yoligrana]

Gracias por los aportes! Seguro que serán muy útiles para los que como yo, están comenzando a entender las media queries y el diseño responsive.

[yoligrana]

Añado otro listado: Media Queries Snippet:
http://nmsdvid.com/snippets/
Saludos

[jakijem]

Yo ando indagando lo mismo, esos recursos que poneis estan muy bien, pero uno no va a poner 1500 media queries, supongo

Debe haber algún tipo de standard, o varios que aglutinen las medidas

Por ejemplo, yo estaba funcionando con algo asi:

Código:

 <!-- smartphone  (portrait and landscape) -->
  <link rel="stylesheet" href="css/smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

  <!-- smartphone horizontal -->
  <link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)">

  <!-- smartphone vertical -->
  <link rel="stylesheet" href="css/smartphone-portrait.css" media="only screen and (max-width : 320px)">

  <!-- iPad -->
  <link rel="stylesheet" href="css/ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

  <!-- iPad horizontal -->
  <link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

  <!-- iPad vertical -->
  <link rel="stylesheet" href="css/ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

  <!-- small desktop -->
  <link rel="stylesheet" type="text/css"
  media="screen and (min-width: 1025px) and (max-width: 1152px)"
  href="css/small_desktop.css" />

   <!-- desktop -->
  <link rel="stylesheet" type="text/css"
  media="screen and (min-width: 1153px) and (max-width: 1280px)"
  href="css/desktop.css" />

  <!-- big laptop -->
  <link rel="stylesheet" type="text/css"
  media="screen and (min-width: 1281px)"
  href="css/laptop.css" />

  <!-- Pantalla grande -->
  <link rel="stylesheet" href="css/widescreen.css" media="only screen and (min-width : 1824px)">

  <!-- iphone4 -->
  <link rel="stylesheet" href="css/iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

Por un lado 11 me parecen muchos, pero por otro, me da miedo dejarme resoluciones o tamaños sin contemplar, es decir, la página se tiene que ver bien en TODOS los dispositivos,

¿Son pocos media queries? muchos? seguro que no hay algo estandarizado en listas de media queries?

[pzin]

No sé porqué empeñarse en buscar una estandarización de dispositivos cuando ahora más que nunca hay muchísimos y la variedad está creciendo.

La cuestión pasa por crear un diseño líquido y luego poner los breakpoints que le hagan faltan, no ponerlos según haya más o menos dispositivos. Es un planteamiento a mi entender un tanto absurdo. Pero bueno…

[yoligrana]

Iniciado por rick_sj

Es el contenido el que debería dictar los tamaños en los que añadir media queries, no el dispositivo.

Esta frase pienso que lo resume todo.

[NueveReinas]

Iniciado por pzin

No sé porqué empeñarse en buscar una estandarización de dispositivos cuando ahora más que nunca hay muchísimos y la variedad está creciendo.

La cuestión pasa por crear un diseño líquido y luego poner los breakpoints que le hagan faltan, no ponerlos según haya más o menos dispositivos. Es un planteamiento a mi entender un tanto absurdo. Pero bueno…

Totalmente de acuerdo. Cada diseño es un mundo.