Problema al crear Responsive Design

[madman_18]

Buenos días!

Estoy peleandome con un diseño que estoy haciendo en responsive design y hay una cosa que no entiendo...

Sé que el Responsive Design hecho con @media hereda las propiedades, pero no entiendo como teniendo el código como este:

Código CSS:

/*Para iphone*/
@media screen and (max-width:320px) and (max-height:480px){    
    header.cabecera{
        width:320px;
        left:0;
        margin-left: 0;        
    }
}
/*Para tablets (kindle, etc...)*/
@media screen and (max-width:1024px) and (max-height:600px){ 
    header.cabecera{
        width:1024px;
        min-height: 65px;
    }  
}
 

El valor que me está cogiendo es el de 1024 y no el de 320 cuando lo visualizo en iPhone o adapto la pantalla del PC a 320x480....

¿Cómo organizo entonces las distintas medidas para el responsive?

[pzin]

¿No es más fácil darle un valor de 100% al ancho?

[madman_18]

Iniciado por pzin

¿No es más fácil darle un valor de 100% al ancho?

Sí, pero lo estaba haciendo para probar algunos bloques que se me sobresalían (por temas de márgenes y demás) y he ido probando con anchos fijos para ver cual era el que me sobresalía

Mi problema es que no entiendo, o mejor dicho, no sé cual es el orden correcto para ir creando los @media quiero decir si partir de resoluciones más altas tipo Kindle/iPad y acabar con las más bajas tipo iPhone o al revés para evitar los problemas de herencia y demás.

[pzin]

Hay mucha teoría sobre eso. Más o menos hay consenso sobre diseñar primero para pantallas pequeñas y luego ir ampliando. Es decir, de menos a más. Pero yo la verdad no he indagado mucho y a veces he usado una forma y otras al revés. Como pasa muchas veces, igual es que por aquello de que tiene un nombre más pegadizo; mobile first.

Pero bueno, aparte de eso... Si usas max-width, lo suyo es poner las reglas de más a menos. Porque el ancho máximo de una pantalla de 1024 pixeles también incluye 320 y cualquier valor por debajo.

[Rafael]

Pzin, "diseñar primero para pantallas pequeñas" ¿te refieres a pensar en ellas primero, o que una media query pequeña debe de ir al inicio de la hoja de estilos?

Mi lógica sería poner pantallas anchas primero en la hoja de estilos y luego ir poniendo max withs progresivamente más pequeñas.

[madman_18]

Jaja creo que he creado debate :P :P

Es que he observado "problemas" que no es que lo sean en sí, cuando empiezas de más a menos la herencia hay alguna que otra vez que da problemas. A mí mi lógica me diría de ir de más a menos, pero claro....veo también problemas a la hora de herencia y resoluciones que quizás sean parecidas

[pzin]

Iniciado por Rafael

Pzin, "diseñar primero para pantallas pequeñas" ¿te refieres a pensar en ellas primero, o que una media query pequeña debe de ir al inicio de la hoja de estilos?

Diseñar primero para dispositivos móviles —o con la pantalla pequeña, que ya hay cada móvil que vaya usted a saber lo que es — y luego incrementar las media-queries usando min-width.

Algo así:

Código CSS:

@media screen and (min-width: 480px) {}
@media screen and (min-width: 960px) {}
@media screen and (min-width: 1280px) {}
 

madman_18 lo de la herencia usualmente es porque cometes algún error o no tienes alguna cosa en cuenta. Por ejemplo ese left que tienes, si luego en lugar de left:0 quieres hacer right:0, te resultará que ocupa el 100%, porque además de right:0 tendrías que poner left:auto.
A veces es un poco lioso. No digo que no.