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?