Auge: Media Queries

Beitrag lesen

Hallo

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; 	
	}
}

Günstiger ist der Mobile-First-Ansatz, bei dem die regeln von schmal nach breit aufgebaut werden. Zudem musst du in späteren Deklarationen nur die zu ändernden Werte aufführen. Bei dir ändert sich nur flex-wrap mit wrap bzw. nowrap, also brauchst du auch nur das ein zweites Mal notieren.

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

@media(min-width:56em) {
  .container {
  	flex-wrap: nowrap; 
	}
}

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

Es gibt mit Sicherheit welche, von denen du nicht weißt. Beispielsweise kleine Notebooks der untersten Preisklasse, die mit einer Auflösung von 1024x768px oder eben weniger daherkommen. Davon abgesehen ist die Auflösung des Displays nicht identisch mit der Auflösung des Viewports des Browserfensters. Nicht jedes Betriebssystem kommt mit randlosen Fenstern daher. Scrollbalken m´nehmen, je nach Betriebssystem, eventuell auch noch Breite ein.

Ist der Anssatz von max-width:56em; überhaupt empfehlenwert?

Ich halte min-width, aufsteigend notiert, für sinnvoller.

Weiterhin besteht für micht noch die Frage was unter verschiedenen Ausgabemediums gemeint ist da ich zurzeit nur @media drinnen habe.

Du kannst mit dem gleichen System auch Angaben für den Ausdruck auf Papier oder in eine Datei machen. Die Unterstützung in den Browsern ist aber recht unterschiedlich und grundsätzlich bestenfalls mäßig.

Sollte die Schreibweise vielleicht geändert werden?

Nein.

Tschö, Auge

--
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
Toller Dampf voraus von Terry Pratchett