Media Queries

[franzsen]

Mit

@media screen and (max-width: 1050px) {

}

kann man die Anzeige an andere Viewports anpassen. In diesem Fall eine Änderung ab einer Bildschirmbreite von 1050px.
Nun habe ich mir die unterschiedlichen Macs angesehen. Folgende Breiten gibt es:
11" 1366x768
12" 2304x1440
13" 1440x900, 1280x800, 2560x1600
15" 2880x1800

27" 2560x1440

iPad
2732x2048

Und hier setzt meine Frage an. Ein 27"er hat einen kleineren Bildschirm als ein iPad? Ich weiß, daß es auch um Pixeln geht. Ein Bildschirm gleicher Größe kann mehr Pixeln enthalten beispielsweise Retina-Display. Wie steuere ich nun die Anzeige nach der Bildschirmbreite und nicht nach Pixeln?

Muß man für jede Bildschirmbreite separat "@media screen ..." anführen? Genügt die Angabe einer Breite da man ja Pads bzw. Smartphones senkrecht halten kann oder muß man sowohl die Höhe und Breite eines Pads/Smartphones berücksichtigen?

Wo gibt es ein Beispiel, daß bei einem Smartphone der Navigator ausgeblendet wird damit das Hauptfenster lesbar bleibt? Das Ausblenden erfolgt ja ebenfalls mit "@media screen ..." aber wohin kommt der Navigator?