Responsive Design - Größenangaben

[Gunnar W.]

Hallo zusammen, ich habe zwei Fragen.

I. Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?

II. Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?

[MrMurphy1]

Hallo

I. Ja. Angaben in em haben keinen Vorteil.

II. Nein. Die Darstellung hängt nicht von der Bildschirmgröße des Endgeräts ab, sondern vom Inhalt der Webseite.

Gruss

MrMurphy

[Gunnar W.]

Hallo

II. Nein. Die Darstellung hängt nicht von der Bildschirmgröße des Endgeräts ab, sondern vom Inhalt der Webseite.

Wenn sie nicht von der Bildschirmgröße abhängt, warum dann @media-Angaben mit der Breite des Viewports?

[Gunnar Bittersmann]

@@MrMurphy1

I. Ja. Angaben in em haben keinen Vorteil.

Doch, haben sie. Siehe in diesem Posting verlinkte Quellen.

LLAP 🖖

[marctrix]

Hej MrMurphy1,

I. Ja. Angaben in em haben keinen Vorteil.

Doch, denn sie funktionieren auch dann, wenn der Platz auf dem Bildschirm wegen Dchriftänderunegn knapp wird oder massenhaft zur Verfügung steht und genutzt werden sollte (Stichwort Tunnelblick).

II. Nein. Die Darstellung hängt nicht von der Bildschirmgröße des Endgeräts ab, sondern vom Inhalt der Webseite.

Darum ist die Angabe unbedingt(!) in em zu machen!

Marc

[at]

Hallo Gunnar.

Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?

Das würde gelten, wenn 1em immer 16px entspräche. Es gilt schon dann nicht, wenn das anderswo im CSS der Website oder des Browsers anders definiert wird.

Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?

Hier wird gern angeführt, dass sich die die Darstellung nach dem Inhalt richten soll. Konkret heißt das hier, dass das Umschalten zwischen unterschiedlichen Layouts nicht anhand der Viewports vorgenommen werden soll, sondern anhand der Breite der Inhalte. Da man die Inhalte aber beim Einsatz eines Content Management Systems nicht vorwegnehmen kann, gibt es das, was du suchst, zumindest in Form von Anhaltspunkten.

MfG, at

[J o]

Hey,

I. Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?

Jein, em ist nicht in Pixel definiert sondern über die Größe der Schrift. Und die ist Standartmäßig 100% = 16 px. Wenn also irgendein Container eine Höhe von 1em hat und font-size: 200%; dann ist der Container 32px hoch.

II. Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?

Ja, so eine Aufstellung gibt es, lass mich kurz schaun... zum Beispiel hier.

Gruß
Jo

[Gunnar Bittersmann]

@@J o

Jein, em ist nicht in Pixel definiert sondern über die Größe der Schrift. Und die ist Standartmäßig 100% = 16 px. Wenn also irgendein Container eine Höhe von 1em hat und font-size: 200%; dann ist der Container 32px hoch.

Bei dir. Nicht bei allen.

Ja, so eine Aufstellung gibt es, lass mich kurz schaun... zum Beispiel hier.

BTW, „hier“ ist kein sinnvoller Linktitel. Besser: Ja, so eine Aufstellung gibt es …

„Sinnvoll“ und „besser“ bezieht sich hier allein auf den Linktitel, nicht auf die Aufstellung.

LLAP 🖖

[J o]

Hey,

Jein, em ist nicht in Pixel definiert sondern über die Größe der Schrift. Und die ist Standartmäßig 100% = 16 px. Wenn also irgendein Container eine Höhe von 1em hat und font-size: 200%; dann ist der Container 32px hoch.

Bei dir. Nicht bei allen.

Wo denn nicht?

Gruß
Jo

[Gunnar Bittersmann]

@@J o

Jein, em ist nicht in Pixel definiert sondern über die Größe der Schrift. Und die ist Standartmäßig 100% = 16 px. Wenn also irgendein Container eine Höhe von 1em hat und font-size: 200%; dann ist der Container 32px hoch.

Bei dir. Nicht bei allen.

Wo denn nicht?

• Bei allen, die in ihrem Browser eine andere Schriftgröße einstellen.

• Im UC-Browser; da entspricht 1em per Vereinstellung 19px.

LLAP 🖖

[marctrix]

Hej J,

Jein, em ist nicht in Pixel definiert sondern über die Größe der Schrift. Und die ist Standartmäßig 100% = 16 px. Wenn also irgendein Container eine Höhe von 1em hat und font-size: 200%; dann ist der Container 32px hoch.

Bei dir. Nicht bei allen.

Wo denn nicht?

Bei mir - ich surfe standardmäßig mit 150% Schriftzoom!

Bei mir ist 1em also standardmäßig 24px groß und ich bin sehr dankbar dafür, dass sich als Bedingung für das Umschalten von Layouts eine Angabe in em durchgesetzt hat.

Es gibt nur wenige Webseitenbetreiber die das anders sehen, so dass ich deren Seiten getrost zugunsten anderer links liegen lassen kann!

Marc

[Gunnar Bittersmann]

@@marctrix

Bei mir - ich surfe standardmäßig mit 150% Schriftzoom!

Was etwas anderes ist als die Einstellung der Schriftgröße im Browser.

Bei mir ist 1em also standardmäßig 24px groß

Das wage ich zu bezweifeln. Was zeigt der Test?

Du bist nicht dem Irrtum aufgesessen, px wären Gerätepixel, oder?

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Bei mir - ich surfe standardmäßig mit 150% Schriftzoom!

Was etwas anderes ist als die Einstellung der Schriftgröße im Browser.

Bei mir ist 1em also standardmäßig 24px groß

Das wage ich zu bezweifeln. Was zeigt der Test?

Du bist nicht dem Irrtum aufgesessen, px wären Gerätepixel, oder?

Marc

[Gunnar Bittersmann]

@@marctrix

[24×24]

Welcher Browser?

Mein Firefox (macOS) zeigt da brav 16×16 an.

Firefox skaliert beim Zoomen die CSS-Pixel. Andere Browser scheinen das wohl anders zu handhaben?

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

[24×24]

Welcher Browser?

Mein Firefox (macOS) zeigt da brav 16×16 an.

Firefox skaliert beim Zoomen die CSS-Pixel. Andere Browser scheinen das wohl anders zu handhaben?

Gerade ff ist der einzige, der meines Wissens nach noch Text-Zoom unterstützt. (Ansicht->Zoom->Text)

Obwohl ie (und dann vielleicht auch Edge) können das auch.

Marc

[Auge]

Hallo

I. Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?

Ja, aber …

Browser auf Desktopsystemen werden typischerweise mit einer Standardschriftgröße von 16px ausgeliefert. Auf so konfigurierten Systemen entspricht 1em 16px. Wenn man aber die Standardschriftgröße auf einen anderen Wert in Pixeln einstellt, verändert sich auch die Größe von einem em.

Mit einer Media-Angabe basierend auf px verändert sich das Textbild (kürzere, dafür mehr Zeilen bei größerer Schriftgröße als von Seitenautor angenommen). Basiert die media-Angabe hingegen auf em, wächst die Größe eines Containers proportional zur tatsächlich verwendeten Schriftgröße beim Benutzer der Seite.

Tschö, Auge

[Gunnar Bittersmann]

@@Gunnar W.

Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?

Nein. 16px ist die Voreinstellung der Schriftgröße in vielen Browsern (damit ein guter Richtwert), aber nicht in allen.

Vergiss am besten, dass es überhaupt soetwas wie Pixel gibt. Wann immer™ in einem Stylesheet px auftaucht, halte ich das für einen Fehler.

Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?

Ja, die gibt es:

Du siehst, dass eine solche Aufstellung unnütz ist. Responsiv design heißt nicht, für einige (nach welchen Kriterien auch immer) auserwählte Geräte zu entwickeln, sondern für alle.

“Responsive design is adapting design to an unknown browser.
Inclusive design is adapting design to an unknown user.”
—Eric Bailey

LLAP 🖖

[Tabellenkalk]

Hallo,

Ich glaub' da musst du noch mal ran. Da sind definitiv zu wenig Hochformate bei…
scnr

Gruß
Kalk

[Gunnar W.]

Das ist ja verrückt, diese Vielzahl von Größen!

[marctrix]

Hej Gunnar,

Das ist ja verrückt, diese Vielzahl von Größen!

Genau deshalb macht man die breakpoints von seinem Inhalt abhängig (em), so dass die Seite auf allen geraten ordentlich aussieht. Für ein paar kann man dann noch ein wenig Finetuning betreiben. So kann es für Apple sinnvoll sein, auf die Auflösungen der eigenen Geräte zu optimieren (oder auch cniht, weil man ja sicher auch gerne die Nutzer von Konkurrenzgeräten von der Großartigkeit des Apple-Universums mit einer Cliquen Website überzeugen möchte - Also muss auch Apples Site auf allen Geräten gut aussehen).

Marc

[Matthias Scharwies]

Servus!

Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?

Ja, die gibt es:

@@Gunnar Bittersmann Kannst du mir bitte sagen, wo du das Bild her hast und, wenn es von Dir kommt, ob ich es im Wiki verwenden kann/ darf?

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Kannst du mir bitte sagen, wo du das Bild her hast

Quelle: Internet 😉

LLAP 🖖

[beatovich]

hallo

I. Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?

Wie andere schon sagten: em ist relativ zur User-definierten Schriftgrösse.

II. Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?

Ich bin mit der Firefox-Viewport Simulation recht zufrieden. Allerdings ist eben eine Angabe von em gar nicht mehr auf einzelne Geräte rückführbar, was sowieso nicht notwendig ist.

[Gunnar W.]

Hi, wenn ich also zwei Angaben mache der Art:

@media only screen and (min-width: 60em)

und

@media only screen and (min-width: 40em)

ist dann die Reihenfolge der @media-Angabe entscheidend? Bei einer Viewportgröße von 70em würden aber immer beide @media-Bedingungen zutreffen.

Oder müsste die kleinere der Angaben so lauten:

@media only screen and (min-width: 40em) and (max-width: 59em)

Was aber dann bei einer Viewportgröße von 59.1em?

[beatovich]

hallo

Was aber dann bei einer Viewportgröße von 59.1em?

Wenn Regeln Breiten-Bereiche überlappen, ist die Reihenfolge entscheidend, aber immer nur bezogen auf die konkret definierten einzelnen Regeln, wobei immer noch die Regel höchster Spezifität gewinnt, egal in welchem media-Bereich sie definiert wurde.

[Matthias Scharwies]

Servus!

Hi, wenn ich also zwei Angaben mache der Art:

@media only screen and (min-width: 60em)

und

@media only screen and (min-width: 40em)

ist dann die Reihenfolge der @media-Angabe entscheidend?

Ja, du überschreibst die ja wieder.

Bei einer Viewportgröße von 70em würden aber immer beide @media-Bedingungen zutreffen.

Genau

Oder müsste die kleinere der Angaben so lauten:

@media only screen and (min-width: 40em) and (max-width: 59em)

Was aber dann bei einer Viewportgröße von 59.1em?

Dann würde diese media queries nicht zutreffen.

Fang am besten ohne media queries an und leg Farben, Text und andere Stilvorgaben fest. Verzichte dabei auf alle Breiten und Höhen! Block-Elemente und Text sind automatisch (z.b. bei h1, p, ul ...) 100% breit.

Wenn du jetzt den Bildschirm auseinanderziehst und merkst, dass bei ca 30em 2 Blockelemente nebeneinanderpassen, setzt du dort eine media queries:

@media only screen and (min-width: 30em) {
  Festlegung für 2-Spaltenlayout

body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

element {
  width: 15em;
}

Wenn du die Seite weiter auseinanderziehst und Platz für mehr hast, kannst du eine weitere media queries machen, die die erste überschreibt:

@media only screen and (min-width: 50em) {
  Festlegung für 3-Spaltenlayout
body {
  grid-template-columns: repeat(3, 1fr);
}

element {
  width: 20em; /* neue Breite */
}

container:

So etwas ist dann übersichtlicher als Breiten- und Höhenangaben quer durchs Stylesheet.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Gunnar W.

wenn ich also zwei Angaben mache der Art:

@media only screen and (min-width: 60em)

und

@media only screen and (min-width: 40em)

ist dann die Reihenfolge der @media-Angabe entscheidend? Bei einer Viewportgröße von 70em würden aber immer beide @media-Bedingungen zutreffen.

Die letzte Angabe gewinnt (bei gleicher Spezifiät der Selektoren).

Bei von-klein-nach-groß (min-width, mobile first) sollte 40em im Stylesheet vor 60em stehen.

Oder müsste die kleinere der Angaben so lauten:

@media only screen and (min-width: 40em) and (max-width: 59em)

Kommt drauf an: overlapping vs. stacked

Was aber dann bei einer Viewportgröße von 59.1em?

Keiner der media queries greift.

Hat sich meine Vorhersage eigentlich bewahrheitet? Muss ich glatt mal testen …

LLAP 🖖

[Gunnar W.]

Kommt drauf an: overlapping vs. stacked

In dem Beispiel werden aber px angegeben. Mit em-Angaben wäre es wie mein Beispiel:

Was aber dann bei einer Viewportgröße von 59.1em?

Keiner der media queries greift.

[Matthias Scharwies]

Servus!

Kommt drauf an: overlapping vs. stacked

In dem Beispiel werden aber px angegeben. Mit em-Angaben wäre es wie mein Beispiel:

Das ist ja auch nicht falsch, aber weniger flexibel. Deshalb ist man zu em übergegangen.

BTW:der Artikel ist von Oktober 2011!

Herzliche Grüße

Matthias Scharwies