Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Media Queries testen

Testen Sie unsere 1920 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Sämtliche Desktop-Browser verfügen über die Funktionalität, um das Verhalten von Media Queries und somit der unterschiedlichen Designs für verschiedene Endgeräte zu testen.

Transkript

Sie können das Verhalten von Media Queries, die die Browserfensterbreite abfragen, jedem Desktop-Browser testen, dazu müssen Sie nicht extra die Seiten auf ein Webspace laden und mit den Smartphone aufrufen. Das brauchen Sie nur für die Geschichte mit der Meta Viewport, um zu gucken, ob der Browser im Smartphone die Seiten kleinzoomt, die Media Query, die können Sie hier testen. Ich mache einfach mal die Browserfenster etwas kleiner und Sie sehen hier rechts die Größe des Browserfensters und bei 768 Pixel ändert sich alles. Das wird hier, mit dem Slogan am deutlichsten, Sie sehen, ups, da füllt das Broweserfenster die gesamte Breite aus. Hier im Formular sehen wir das auch und jetzt gilt wieder die Seitenbegrenzung hier. Das kann man also genau ausprobieren, indem man einfach das Browserfenster vergrößert und verkleinert. Es gibt weitere Tools in der Web-Developer, Werkzeugleiste hier, dort gibt es das Menü Größe ändern Fenstergröße anzeigen hier, damit wird die aktuelle Fenstergröße angezeigt, der Viewport des Ansichtsfenster, wie sie hier so schön heißt, das ist immer ein bisschen kleiner, da wird alles abgezählt hier. Bei Größe ändern können Sie sich verschiedene Standardgrößen einstellen, aber eigentlich ist das in modernen Browsern vielfach schon drinnen, hier beim Firefox zum Beispiel, ich stelle die Toolbar mal wieder aus, finden Sie das in Menü und zwar unter Entwickler-Werkzeuge, jetzt wird's ein bisschen unübersichtlich. Sie sehen hier noch, ich bin nur in den Entwickler-Werkzeugen und hier gibt es den Befehl Bildschirmgrößen testen. Der ist sehr schön, denn hier kann man im selben Browserfenster einfach gucken, wie sich das auswirkt. Hier zum Beispiel, gehe ich jetzt mal auf eine typische Smartphonegröße 320x480, und Sie sehen so würde das aussehen, hier in einem kleinen Browserfenster, vorausgesetzt es steht meta name viewport width=device width im Quelltext, dann sieht das ungefähr so aus, und jetzt kann man das entweder hier manuell größer ziehen, oder die voreingestellten Größen benutzen, ich gehe jetz hier auf 360x640. Da sieht das immer noch so aus und man kann das jetzt die größer ziehen und dann sieht man genau, wo sich die Sachen ändern. Hier kann man das Ganze auch drehen. Das heißt also, ich probiere jetzt einmal 320x480 im Hochformat. Jetzt gehe ich mal in Querformat, dann würde das so aussehen und wieder zurück, und wenn man genug getestet hat, kann man hier einfach das Ganze wieder beenden und ist wieder im normalen Browserfenster. So kann man Media Queries zur Abfrage der Browsefensterbreite ganz einfach auch am Desktop testen. Eine Einschränkung von Media Queries ist der alte Internet Explorer und zwar genau genommen ab Version 8. Hier in normalen Internet Explorer sieht das alles noch ganz gut aus und jetzt gehe ich mal runter auf den Achter und Sie sehen der kennt keine Media Queries, der stellt also hier quasi die mobile Version dar und nimmt hier, wie eigentlich bekannt schon, auch die Farbverläufe nicht. Er kann also fast eigentlich nicht mehr so viel. Ob das wichtig ist, oder nicht, das zu reparieren. Das hängt davon ab, wie iel Besucher mit Internet Explorer 8 man hat. Es ist alles bedienbar, es ist alles zu sehen es sieht halt nur nicht so hübsch aus, wie an andern aber mobile first, wie sich das Ganze nennt, also zuerst die mobile Seite gestalten und dann hinterher die Desktop-Seite. Der einzige, der da Schwerigkeiten damit hat, ist der IE8.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!