CSS @media Verwendung auf dem Gerät statt auf der Breite

Question

Ich weiß, wie @media verwendet bestimmte Geräte auf max-width basierend auf Ziel, wie so

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
    } 
} 

Aber gibt es eine schnelle Möglichkeit, es auf dem Gerät basiert zu tun , so

@media screen and (min-width: small) { 
    body { 
     background-color: lightgreen; 
    } 
} 


@media screen and (min-width: medium) { 
    body { 
     background-color: black; 
    } 
} 

Answer 1

Ja, es gibt eine CSS-Präprozessor verwenden, wie Sass, können Sie tun:

$small: 480px; 
$medium: 720px; 

@media screen and (min-width: $small) { 
    body { 
     background-color: lightgreen; 
    } 
} 


@media screen and (min-width: $medium) { 
    body { 
     background-color: black; 
    } 
} 

Answer 2

Ich sah Ihre Frage über Medienabfragen und ich dachte an die gleiche Frage. Meiner Meinung nach haben beide, Fubar und Raptor, ihre Antworten richtig.

Das gesagt, möchte ich auf eine Methode der Verwendung von Medienabfragen hinweisen, die ich persönlich als eine der vielseitigen Methoden empfinde.

Ich persönlich glaube, dass Google Chrome Entwickler-Tools verwenden und langsam schrumpfen die Bildschirmgröße zu sehen, wenn bestimmte Aspekte Ihrer Website entweder peinlich aussieht, oder einfach nur bricht, die Bildschirmgrößen beachten und Medienabfragen an diesen Haltepunkten dann schreiben möglicherweise der beste Weg, um Ihre Website auf den verschiedensten Bildschirmgrößen gut aussehen zu lassen.

Aus meiner persönlichen Erfahrung, wenn ich mich zu sehr auf bestimmte Gerätegrößen konzentriere, insbesondere wenn es um die unterschiedlichen Bildschirmgrößen von Android vs Apple Produkten geht, musste ich zwangsläufig ganze Produktlinien hinab gehen verschiedene Klassen von Bildschirmgrößen. Das macht Code, der in Eile verwickelt werden kann!

Ich weiß, diese Antwort hat keinen spezifischen Code und kann mehr als eine Meinung als Dev Bible Tatsache betrachtet werden, aber ich fühle stark, dass die Methode, die ich beschrieben habe, diejenige ist (besonders wenn Sie nicht zu erfahren sind und sind die verschiedenen Klassen von Bildschirmgrößen/Auflösungen von Mobilgeräten nicht kennen) ergeben die vielseitigsten Ergebnisse.

Ich hoffe, dass hilft Puk. Und wenn Sie oder jemand sich anders fühlen oder eine gegenteilige Meinung abgeben möchten, können Sie diese gerne präsentieren. Ich behaupte nicht, alles zu wissen und bin immer eifrig, neue Dinge, Methoden und Sichtweisen zu lernen!