Vertikale Zentrierubg von Bild und Text

[Rolf B]

Hallo Winnie,

die Bedingung

am Smartphone

ist etwas, was Du nicht abfragen kannst. Du kannst @media-Abfragen auf bestimmte Viewportbreiten machen (also Bildschirmbreite bzw. Fensterbreite).

Damit das funktioniert, ist eine Viewportangabe, wie das Wiki sie im Grundgerüst einer HTML Seite darstellt, wichtig. Andernfalls skalieren die Handybrowser die Darstellung so, dass die Website glaubt, sie hätte einen 960px breiten Bildschirm.

Mit der Viewportangabe teilst Du dem Browser mit: Ich weiß, wie ich mit kleinen Viewports richtig umgehen muss.

Die nächste Handy-Besonderheit^[1] ist, dass 1px im CSS nicht ein Gerätepixel ist. Klassische Desktops haben knapp 100 Punkte pro Zoll (96 dpi), moderne Handy haben 400dpi oder mehr. Damit Pixelangaben nicht zu Mikrobildern führen, werden CSS-Pixel entsprechend einem Gerätepixel-Umrechnungsfaktor (devicepixel-ratio) umgerechnet. Dein Handy mit einer Höllenauflösung von 2000×3500 erscheint für CSS damit immer noch wie 320x560.

Aber du kannst es von einem Desktop-Browser, dessen Fenster auf ganz klein eingestellt wurde, immer noch nicht unterscheiden.

Und du solltest auch nicht auf px abfragen. Der Browser hat eine Standardschriftart, deren Größe vom Benutzer in den Einstellungen festgelegt werden kann. Oft sind es 16px, aber dafür gibt's keine Garantie. Als Näherungswert ist das trotzdem tauglich. Wenn Du "unter 320 CSS Pixel Bildschirmbreite" als Auslöser für Handy-Darstellung haben willst, kannst Du eine @media-Abfrage auf 20em machen. 1em ist identisch mit der Standard-Schriftgröße des Browsers.

Und, ach ja, du solltest andersrum abfragen. Es ist oft leichter, eine Webseite von schmaler Darstellung per CSS auf breite Darstellung umzumodeln als andersrum.

Die Abfrage an sich geht so:

@media (width >= 20em) {
   img {
   }
}

Ein solcher @media-Block enthält CSS Regeln, die nur dann gelten, wenn die angegebene Bedingung erfüllt ist. Es gibt diverse Arten, wie man sowas formulieren kann – Gunnar hat in seinem Codepen einige Komplikationen drin, und ich muss peinlich lange nachdenken, bis ich weiß, was mit 20 <= width gemeint ist. width >= 20em verstehe ich hingegen sofort.

Das kannst Du dann nutzen, um entweder Regeln zu "stapeln", d.h. je breiter es wird, desto mehr Regeln kommen hinzu und überschreiben die Regeln für schmalere Viewports, oder Du verwendest Bereichsabfragen:

@media (10em < width <= 20em) {
   ...
}
@media (20em < width <= 40em) {
   ...
}
@media (width > 40em) {
   ...
}

Achte nur darauf, dass Du (a) keine Lücken hast und (b) keine Überlappungen. Würde bei der letzten Abfrage beispielsweise width >= 40em stehen, dann würden bei genau 40em beide Abschnitte gelten.

Auf diese Weise kannst Du deine Darstellung an die Viewportbreite anpassen.

Rolf

---

1. Nicht nur dort. Die Pixelmonster unter den Desktop-Bildschirmen mit ihrer „Retina“-Auflösung haben das gleiche Problem zu lösen ↩︎