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

[Auge]

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

[Gunnar Bittersmann]

@@hume

Ab einer maximalbreite von 896px in 56em …

Was denn nun: 896px oder 56em? Letzteres ist sinnvoll. Vergiss beim Stylen mit CSS, dass es soetwas wie Pixel gibt.

… 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 …

Nein. Es ist auch irrelevant. Vergiss beim Stylen mit CSS, dass es soetwas wie Pixel gibt.

Das Malzeichen ist übrigens ×.

… oder gibt es noch kleinere von denen ich nichts weiß :D

800 × 600, 640 × 480, …

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

Nein. Wenn stile ab einer bestimmten Breite gelten sollen, willst du min-width.

Ich habe deshalb den max-width Wert genommen

Das hättest du für .box auch tun sollen. width: 29em passt nicht in schmale Viewports.

LLAP 🖖

[hume]

Ok, werde dass mit den Pixeln vergessen 😀 (Gewohnheit). Bezüglich .box passt sich dies automatisch an bereits Testbilder und Textinhalt. Unter 56em sieht es einfach nicht mehr schön aus. Dafür ist ja flexbox da oder nicht?

Das hättest du für .box auch tun sollen. width: 29em passt nicht in schmale Viewports.

Verstehe jetzt nicht ganz wie du dass meinst?

[Gunnar Bittersmann]

@@hume

Das hättest du für .box auch tun sollen. width: 29em passt nicht in schmale Viewports.

Verstehe jetzt nicht ganz wie du dass meinst?

Wenn du .box { width: 29em } angibst, ragt die Box bei Viewport schmaler als 29em raus.

Du musst aber gar keine Breiten angeben. Und per media query lediglich flex-direction umschalten.

☞ Beispiel

LLAP 🖖

[hume]

Ok, habe es bei mir mal getestet jedoch sehe ich keine Veränderung.

Hier mal die komplette CSS

*
{
	margin:0;
	padding:0;
	font-family:Arial;
	
}

header
{
	height:9em;
	background-color:#D3d3d3;
	background-color:hsla(360,0%,83%,0.2); 
	border-bottom: 0.1em groove black;

			
}

header a
{
	text-decoration:none;
	line-height:4em;
	color:black;
	font-size:24pt;
}

.logo
{
	padding:0.8em;
	
}

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


h1, h2, h3 
{
	font-size:1em;
}

article a
{
	text-decoration:none;
	color:#0099CC;
}


article a:focus, a:hover, a:active
{
    color:#333333;
}



.box-text
{
	line-height:1em;
	padding:1em;
	
}



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


.bild1
{
	position:relative;
	top:2em;
}


footer
{
	background:#272727;
	height:35em;
	width:auto;
}

[Gunnar Bittersmann]

@@hume

Ok, habe es bei mir mal getestet jedoch sehe ich keine Veränderung.

Wir auch nicht. Wir sehen nämlich gar nichts,

Hier mal die komplette CSS

Online-Beispiel, bitte.

LLAP 🖖

[hume]

Habe mal eine Subdomain erstellt: http://test.plasa-gbr.de/

[hume]

@@hume Wir auch nicht. Wir sehen nämlich gar nichts,

Online-Beispiel, bitte.

Und?

[Christian Huml]

@Gunnar Bittersmann

Habe nun die Subdomain wieder entfernt. Beziehe mich auf dein Beispiel Beispiel

Wenn du .box { width: 29em } angibst, ragt die Box bei Viewport schmaler als 29em raus. Du musst aber gar keine Breiten angeben. Und per media query lediglich flex-direction umschalten.

Kannst du mir mal dass an ein Beispiel zeigen, was du mir herausragen meinst?

[Gunnar Bittersmann]

@@Christian Huml

Wenn du .box { width: 29em } angibst, ragt die Box bei Viewport schmaler als 29em raus. Du musst aber gar keine Breiten angeben. Und per media query lediglich flex-direction umschalten.

Jetzt musste ich erstaml raussuchen, wo du das her hast. Besser wär’s gewesen, wenn du auf das Posting antwortest, auf das du dich beziehst.

Kannst du mir mal dass an ein Beispiel zeigen, was du mir herausragen meinst?

Kann ich: Codepen

LLAP 🖖

[Christian Huml]

Hallo @Gunnar Bittersmann

vielen Dank für dein Beispiel.

Wenn du .box { width: 29em } angibst, ragt die Box bei Viewport schmaler als 29em raus. Du musst aber gar keine Breiten angeben. Und per media query lediglich flex-direction umschalten.

Du schreibst ragt heraus, kann man dies nicht auch wird Abgeschnitten nennen oder ist dies ein Denkfehler?

PS: Codepen ist cool 😀

Mit freundlichen Grüßen

Christian

[JürgenB]

Hallo,

Du schreibst ragt heraus, kann man dies nicht auch wird Abgeschnitten nennen oder ist dies ein Denkfehler?

Ragt heraus: Kann reingescrollt werden.
Abgeschnitten: Ist weg bzw. unsichtbar.

Gruß
Jürgen

[Christian Huml]

Hallo @JürgenB

Ragt heraus: Kann reingescrollt werden. Abgeschnitten: Ist weg bzw. unsichtbar.

Ok, danke für die Info 😀

[Christian Huml]

@Gunnar Bittersmann

habe dein Beispiel Codepen modifiziert, wäre so eine Vorgehensweise richtig? Code modifiziert

Mit freundlichen Grüßen

Christian Huml