Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Media Queries einsetzen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Media Queries stellen eine Erweiterung der bestehenden Mediatypen dar. Diese fragen die Bildschirmgröße des jeweiligen Geräts ab und passen die Darstellung der Website an diese an.

Transkript

In mobilen Browsern sehen die Beispielseiten eigentlich schon ganz gut aus. Hier der Text ist gut lesbar, das Formular ist bedienbar, nur am Desktop, also, im normalen Browser, in Anführungstrichen, ist das eingentlich schlechter geworden, als vorher mit der mobilen Version. Die Seiten gehen über die gesamte Breite, egal, wie breit das Browserfenster ist. Das Kontaktformular ebenso, der Slogan könnte wieder nach oben. Diese kleinen Nachbesserungen wollen wir jetzt angehen und dazu gibt es sogenannte Media Queries. Media Queries sind eine Erweiterung der bestehenden Medientypen. Sie kennen ja bereits @media screen für die Druckversion, hier haben Sie @media screen print verwendet und Media Queries fragen zusätzlich zu Medientypen noch etwas mehr ab. Ich habe hier schonmal eine Datei vorbereitet, die heißt Desktop.css, die ist noch fast komplett leer und enthält hier nur eine Medientypangabe. Diese desktop.css wird später in zentrale.css eingebunden, da haben wir ihn, desktop.css. So, gespeichert ist schon, dann ist sie da schon mal drin, dann vergisst man das später nicht. Jetzt müssen hier nur noch ein paar Angaben zur Gestaltung am Desktop rein. Um je nach Breite des Browserfensters unterschiedliches CSS ausliefern zu können, gibt es hier jetzt eine kleine Erweiterung für die Medientypen. Dazu sage ich @media screen and, also und, und dann in Klammern, ganz normalen Klammern, die Mindestbreite min-width: 768px. So sieht das aus. So, jetzt der Reihe nach @media screen heißt für den Browser, wenn die Seite am Bildschirm dargestellt wird und das Browserfenster, der Viewport, mindenstens eine Breite von 768 Pixeln hat. Die 768 Pixel, das bezeichnet man hier als Breakpoint. Das hat nichts mit dem Tennis zu tun. Das heißt hier einfach ein Umbruch für den Browser, heißt es ein Bruch erfolgt bei 768px, und da sollen dann die folgenden Styles gelten. Die 786 kommen daher, dass ein iPad und viele andere Tablets im Hochformat diese Breite haben und das nimmt man dann als Grenze. Hier sollen jetzt die Styles rein, die Sie eigentlich schon kennen, also, hier kommt wieder die Begrenzung für den Wrapper rein, der Wrapper: und der soll, dann eine Breite von 720 Pixel bekommen, wie er das hatte und margi oben und unten:10 Pixel und auto. So, wie das hier vorher schon gewesen ist. So, der zweite Kandidat ist der Slogan, mit der Klasse Slogan dadrin und der soll wieder absolut positioniert werden. Das kann ich mir kopieren hier, diese 3 Zeilen, und hole mir das hier rüber, ein bisschen aufräumen, so wird das schon. Der ist jetzt wieder absolut positioniert. Eigentlich können wir mal einen kleinen Blick zwischendurch werfen hier auf die Startseite, neu laden. Sie sehen, die Begrenzung der Breite ist wieder da und der Slogan sitzt wieder oben. Jetzt fehlt eigentlich nur noch das Kontakformular. Das muss auch nach wieder in der Breite begrenzt werden, form soll wieder width:320px bekommen, so, und input Type text, den kann ich am besten auch wieder rüberkopieren aus form-einspaltig.css. Da ist er schon markiert und, so, komplett und hier ist er drin, input Type text, das Texteingabefeld, das Email und das Ganze soll hier, jetzt kommt der Kram wieder raus, weil der steht in dem andern Stylesheet schon drin. Wir brauchen eigentlich nur die Breite wieder zu fixieren. Alles andere wird doppelt gemoppelt. Die beiden ergänzen sich jetzt perfekt. So, und hier das Formular hat auch wieder eine kleine Begrenzung.

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!