hume: Media Queries

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

akzeptierte Antworten

  1. 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
  2. @@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 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. 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?

      Desktop

      Mobile

      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?

      1. @@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 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. 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;
          }
          
          
          
          1. @@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 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. Habe mal eine Subdomain erstellt: http://test.plasa-gbr.de/

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

              Online-Beispiel, bitte.

              Und?

            3. @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?

              1. @@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

                Screenshot: Text ragt aus Viewport raus

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                1. 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?

                  Abgeschnitten

                  PS: Codepen ist cool 😀

                  Mit freundlichen Grüßen

                  Christian

                  1. 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

                    1. Hallo @JürgenB

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

                      Ok, danke für die Info 😀

                2. @Gunnar Bittersmann

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

                  Mit freundlichen Grüßen

                  Christian Huml