Minimum Seitenbreite unter 20em ist die korrekte Darstellung einer Seite da schon unerheblich

Webdesign & Technik HTML & CSS
1

Ich möchte mal fragen, ist die korrekte Darstellung einer Seite beim minimum unter 20em schon unerheblich, das würde einem IPhone mit 320px Breite entsprechen.
Klaro nehme ich em als Schrifteinheit also auf die Schriftgröße bezogen.
Ich frage, weil ich ein Workarraound benutze:

@media (max-width: 13.75em) {
	html {
		min-width: 13.375em;
	}
}

Denn unter diesem Wert also 13.75em (würde in etwa 220px entsprechen) wird mein grid seitlich rechts aus dem
body überragend dargestellt.
Es kann natürlich auch sein, das irgend eine ungewollte Breite eines grids das verursacht, das muss ich noch
prüfen.
Mein body ist gleichzeitig mein wrapper, enthält aber auch gleichzeitig mein grid. Vielleicht geht das nicht, und
muss als wrapper (des Blogs) ein weiteres div einführen und dem dann auch die Hintergrundfarbe mitgeben.

Könnt ihr etwas dazu sagen?

2

also an sich haben Geräte sog. „Hardwarepixel“, die sich da etwas rudimentär um die Skalierung kümmern. Daher würde ich eher sagen, da eine minimale Breitenangabe überhaupt nicht anzuwenden, sondern idealerweise einfach nur 100% und mit allen Elementen darin und paddings/margins insgesamt nicht über 100% herauszuragen.

Wenn Du da also mehr Inhalte rechts hast, dann ragt da wohl eher was wegen paddings/margins heraus, oder gewisse Elemente haben eine Standard-Breite. Je nach Browser ist das (leider) der Fall, deswegen ist das Anpassen für alle Browser auch eher eine Kunst, welche viel Nerven braucht.

Ging bei bplaced nicht anders:

https://img.xrmb2.net/images/782581.png

3

Nungut, dann mal etwas konkreter.
Testseite

Was ich nun meine, egal welcher Browser, bitte mal die Schriftgröße auf 500% setzen und das Bildfenster so eng zusammenziehen bis es nicht weiter geht.
Nun etwas bis zum ersten Vorschaubild hinunterscrollen.
Es entsteht unten ein Scrollbalken, soweit alles gut, den mal bitte nach rechts bewege und dann sieht man den Effekt den ich meine. Achso, mit den Def-Tools sieht man es besser.
Ich bin mir nun nicht sicher ob das normal ist.
Bei einer Schriftgröße bis 200% wird alles scheinbar richtig dargestellt, es stört mich nur was nun bei 500% Schriftgröße passiert.
O.K. es handelt sich hier um eine sehr sehr schmale Breite die vielleicht nicht mehr relevant ist.
Deshalb versuche ich diesen Fehler? mit folgendem zu unterbinden:

/*
@media (max-width: 19.938em) {
	html {
		min-width: 19.563em;
	}
}
*/

Ihm also eine Min-Breite von 320px (19.563em) mitgebe.

Aber das kann es doch nicht sein, oder?

Oder ist es doch normal was hier bei einer Mindestbreite von 320px passiert.

Der einsiedelnde

4

Soweit ich das sehe, hat das zu tun mit grid-template-columns bei .work-wrapper
Invalidiert man

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

… dann verschwindet die Überbreite, denn diese 250px sind es, die dann bei der Skalierung den zusätzlichen Platz im Element beanspruchen.

6

Ja… , soweit richtig, habe ich jetzt auch ausprobiert. Ich mag ehrlich gesagt die Angabe in px nicht wirklich, werde mal 15.625 em einsetzen, was dann passiert. Wenn ich allerdings % - Werte einsetze dann rutschen die „cards“ nicht in die nächste Zeile (wenn das Bildschirmfenster schmaler wird), ABER, auch beim schmalsten Bildschirmfenster wird die Breite korrekt eingehalten und NICHTS rutscht herüber ausserhalb des GRIDs. Es mag also am Angabe-Wert liegen.

Einsiedler