Medienabfragen: Wie werden Desktop, Tablet und Mobilgerät anvisiert?

Question

Ich habe einige Recherchen zu Medienabfragen durchgeführt und verstehe immer noch nicht ganz, wie man Geräte bestimmter Größen ansprechen kann.

Ich möchte in der Lage sein, Desktop, Tablet und Mobilgeräte anzusprechen. Ich weiß, dass es einige Unterschiede geben wird, aber es wäre schön, ein generisches System zu haben, das zum Ansprechen dieser Geräte verwendet werden kann.

Einige Beispiele, die ich gefunden habe:

# Mobil
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px)

# Desktop
only screen and (min-width: 992px)

# Riesig
only screen and (min-width: 1280px)

Oder:

# Telefon
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

Welche sollten die breakpoints für jedes Gerät sein?

Answer 1

Es geht nicht nur um die Auflösung, Sie müssen auch den DPR des Geräts finden:
whatismyscreenresolution "Geräte-Pixel-Verhältnis (DPR) ist eine Zahl, die von Geräteherstellern angegeben wird und für HiDPI (High Dots Per Inch) oder Retina (Apple's Warenzeichen) Displays verwendet wird"

Beispiel für Media Query: (min-Auflösung: 3.0dppx)

Answer 2

@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobil

    }

    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobil

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }