Media Queries - Handy vs Desktop Browser

Question

Ich habe viele Seiten gesehen, die sowohl auf Desktop-Browsern und Handy-Browsern reagieren, ich arbeite auf einer Website und ich habe die folgenden Stylesheet-Setup: (Die Hicks Design-Website ist ein gutes Beispiel was ich erreichen will, wenn Sie eine brauchen)

/* Normal styles go here */ 

@media screen and (min-device-width:321px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:701px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:1025px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:2049px) 
{ 
    /* Styles */ 
} 

Allerdings scheint mein Stylesheet oben nur auf Desktop-Browsern zu funktionieren. (getestet mit Android Firefox und dem Standard-Android-Browser auf einem Sony Xperia Ray)

Die Regeln der Hicks-Design-Website sind sehr ähnlich zu meinen, aber sie verwenden Min und Max, aber entweder für mich scheint nicht zu arbeiten sowohl mobile als auch Desktop-Browser. (Ich habe vor, meine Medienanfragen zu optimieren. Ich versuche nur, die Grundlagen so zu bekommen, wie ich sie im Moment haben möchte).

Wenn ich max-device-Breite statt max-width verwenden wird es als Reaktion auf mobilen Browsern, aber nicht Desktop-Browser ...

ich folgendes versucht haben folgende, um das Problem zu erhalten:

@media screen and (max-width:480px), screen and (max-device-width:480px) 
{ 
    /* Styles */ 
} 

auch:

@media screen and (max-width:480px), and (max-device-width:480px) 
{ 
    /* Styles */ 
} 

Allerdings glaube ich auch nicht davon korrekt sind als die Web developer Toolbar für Firefox darüber beschwert. Ich habe auch ein paar Variationen über die oben genannten Regeln ausprobiert, kann es aber immer noch nicht zum Laufen bringen.

Von was ich verstehe max-width liest die Breite des Ansichtsfensters (sagen .. .. die Breite des Browser-Fensters) und Max-Gerät-Breite liest die tatsächliche Breite des Bildschirms, den Sie verwenden, um die Website anzuzeigen. - Ich bin verwirrt, warum max-width die Browserbreite des Handys nicht zu lesen scheint.

Ich denke, ich vermisse etwas offensichtliches über Medienabfragen hier ... Es scheint nicht sinnvoll zu sein, dass wenn ich meine Website auf Desktop-und mobilen Browsern reagieren will, muss ich eine Kopie von allen meinen Medien Abfragen und ändern Sie einfach die Abfrage von "Bildschirm und (Max-Breite)" auf "Bildschirm und (Max-Gerät-Breite)" oder umgekehrt. (worüber ich mich schäme, hier sogar als Workaround zu tippen)

Wie kann ich die (max-width) und (max-device-width) Regeln kombinieren oder wie erreiche ich das?

Wenn Sie lieber nicht alle oben lesen:

I @media Bildschirm und bin mit (max-width: 480px) aber es scheint nur @media Bildschirm und (max-device-width: 480px) arbeitet auf Handys. Wie kann ich diese beiden Regeln kombinieren, um ein Responsive Design auf mobilen und Desktop-Browsern zu erreichen?

Answer 1

Es gibt eine Menge von Medien gibt, und wenn Sie nur durch seine Eigenschaften auswählen möchten, verwenden Sie das all Stichwort:

@media all and (max-width:480px) 
{ 
    /* Styles */ 
} 

bearbeiten:

Kombinieren Regeln mit oder:

@media all and (prop1:val1), all and (prop2:val2) 
{ 
    /* Styles */ 
} 

Kombinieren Regeln mit und:

Answer 2

@media screen and (min-width:240px) and (max-width:480px), 
    screen and (min-device-width:240px) and (max-device-width:480px) 
{ 
    /* Styles */ 
} 

das Problem behoben, früheren Antworten half mir so gestimmt werden. Vielen Dank.