Media Queries

[hume]

Hallo zusammen,

hätte wieder ein paar Fragen zu Media Queries 😉

Habe derzeit einen Container erstellt mit 3 Boxen.

Hierzu der CSS Code:

.container
{
	display:flex;  
	flex-wrap: nowrap; 
 	background:url(img/Zaehler.png) no-repeat;
	background-size:cover; 
	justify-content:center; 
	padding:3em; 
	
}

@media(max-width:56em)
{
	.container
	{
	display:flex;  
	flex-wrap: wrap; 
 	background:url(img/Zaehler.png) no-repeat;
	background-size:cover; 
	justify-content:center; 
	padding:3em; 	
	}
}

.box
{
	background-color:white;
	text-align:center;
	line-height:4em;
	width:29em;
	margin:1em;	
}

Ab einer maximalbreite von 896px in 56em werden die Boxen untereinander dargestellt. Dies sollte auch so sein (für Mobilgeräte). Nun hätte ich hierzu aber noch Fragen.

Der kleinste Bildschirm (PC oder Laptop) beträgt 1024x768px ist dies so korrekt oder gibt es noch kleinere von denen ich nichts weiß :D

Ist der Anssatz von max-width:56em; überhaupt empfehlenwert? Ich habe deshalb den max-width Wert genommen da so kleiner der Bildschirm so schlechter sind die Boxen sichtbar bis überhaupt nicht mehr. Weiterhin besteht für micht noch die Frage was unter verschiedenen Ausgabemediums gemeint ist da ich zurzeit nur @media drinnen habe. Sollte die Schreibweise vielleicht geändert werden?

Mit freundlichen Grüßen

hume