CSS: Responsives Design

Name: CSS: Responsives Design
Author: Cliff Brozo

Wie Sie sicherstellen, dass Ihre Webseite auf jedem Gerät richtig angezeigt wird

Preview the first lesson free — get full access to all 4 lessons.

Kurs: On-Demand

(Unterhaltungsmusik) Willkommen zurück zum Kurs von Knowledge City auf kaskadierenden Stylesheets. Ich bin Cliff Brozo, ich bin Ihr Professor. Und in der heutigen Lektion Wir werden über Responsive Design sprechen. wie sich die Dinge ändern werden, wenn sich das Ansichtsfenster ändert. Wir werden die verschiedenen Ansichtsfenster kennenlernen. Wir werden herausfinden, was wir unter Rasteransicht verstehen und wie setzen wir es um. Wir werden Medienabfragen untersuchen und Container betrachten und wie man sie benutzt. Schauen wir uns das Ansichtsfenster an. Es ist der sichtbare Bereich des Benutzers. Abhängig von dem Gerät, das der Benutzer betrachtet, es könnte ein Telefon sein, es könnte ein Tablet sein, Es könnte ein Desktop sein, es könnte ein Laptop sein. Und wir codieren unseren HTML-Code um darauf zu achten, welches Gerät der Benutzer verwendet. Und dann können wir unseren Code so gestalten, dass er perfekt zu diesem Gerät passt. Eine reaktionsschnelle Rasteransicht ermöglicht es uns, Zeilen zusammenzustellen und Spalten und teilen Sie die Seite in Stücke. Und wir können dann jedes dieser Stücke identifizieren und stylen sie anders. Mit Medienabfragen können wir uns dieses Ansichtsfenster ansehen und testen Sie das Gerät des Benutzers, um zu sehen, welches er oder sie benutzt. Wir können dann unsere Breite und Höhe einstellen um unsere Seiten auf ihrem Gerät zu maximieren. Reaktionsschnelle Bildskala, und es gibt verschiedene Möglichkeiten, die Bildskala zu erhalten zum Gerät passen. Wir möchten auf jeden Fall unser Seitenverhältnis beibehalten damit das Bild nicht verzerrt, was bedeutet, dass wir selten ein Bild strecken wollen um einen Inhaltsbereich mit der falschen Größe anzupassen. Responsive Bilder haben drei Möglichkeiten. Sie können in einem bestimmten Bereich enthalten sein, wie Sie sehen können, Die London Bridge ist perfekt in dieser quadratischen Box enthalten. Wenn wir den Browser bitten, die London Bridge zu 100% anzupassen Von der Bildgröße verlieren wir einen Teil des Bildes. Der Rest passt nicht und wie Sie sehen können, es wird verzerrt. Und zum Schluss, wenn wir den Browser fragen um den gesamten Bereich abzudecken, gut, das ist nicht nur die einfache Box, wenn Sie sehr aussehen, sehr eng in der unteren rechten Ecke, Da ist die Spitze der London Bridge denn das ist genau dort dieser Teil des Bildes. Medienabfragen ermöglichen es uns, verschiedene Bilder zu platzieren auf verschiedenen Bildschirmen. Je nach Gerät des Benutzers Der Benutzer sieht ein ganz anderes Bild von im Wesentlichen dem gleichen Zeug. Mit Containern können wir Excel-ähnliche Felder erstellen und dann Dinge in diese Kisten legen. Wir können normale Zeilen und Spalten haben oder möglicherweise nicht von der gleichen Größe sein, oder wir können Lust bekommen und eine andere Gruppierung erstellen von Zeilen und Spalten mit Überlagerungen und Flächen das sind nicht die gleiche Größe. Schauen wir uns also an, wie das alles funktioniert.

Mittelstufe Anbieter : Cliff Brozo 4 Lektionen · 22m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

In diesem Kurs werden Techniken des reaktionsfähigen Designs mit CSS besprochen. Damit wird sichergestellt, dass Webseiten auf den Bildschirm des jeweiligen Geräts passen: Telefon, Tablet oder Desktop. Sie werden lernen, was der Viewport ist und wie Sie feststellen, welches Gerät verwendet wird. Außerdem werden Sie die Grid-Ansicht, Media-Queries, Container und die Verwendung von CSS für das Layout von Seiten untersuchen.

Was Sie lernen werden

Im Viewport navigieren und bestimmen, welches Gerät verwendet wird
Media Queries und Container anwenden, um Layouts auf verschiedenen Geräten anzupassen
CSS Grid View zur Seite-Layout nutzbar machen
CSS verwenden, um Seiten so zu gestalten, dass sie auf Telefon-, Tablet- und Desktop-Bildschirmen passen
Responsive Web-Designs mit responsivem HTML und CSS-Frameworks erstellen

Wichtige Erkenntnisse

Responsive Design mit CSS stellt sicher, dass Webseiten zur Bildschirmgröße des verwendeten Geräts passen, einschließlich Telefon, Tablet oder Desktop.
Der Kurs erläutert, was der Viewport ist und wie man bestimmt, welches Gerät verwendet wird.
Er untersucht Grid View, Media Queries und Container als Werkzeuge zum Gestalten von Seiten.
Der Kurs behandelt die Verwendung von CSS, um Seiten responsiv zu gestalten.

Häufig gestellte Fragen

Was behandelt dieser Kurs?

Er behandelt Responsive Design-Techniken mit CSS, einschließlich des Viewports, der Bestimmung, welches Gerät verwendet wird, Grid View, Media Queries, Container und der Verwendung von CSS zum Gestalten von Seiten.

Was werde ich lernen zu tun?

Sie lernen, im Viewport zu navigieren, Media Queries und Container zu untersuchen und Grid View nutzbar zu machen.

Warum ist Responsive Design wichtig?

Responsive Design stellt sicher, dass Webseiten auf den Bildschirm des Geräts passen, das Sie verwenden: Telefon, Tablet oder Desktop.

Wie ist der Kurs strukturiert?

Der Kurs ist in vier Lektionen unterteilt: Responsive Design Part 1 bis Part 4.

Welche Fähigkeiten entwickelt dieser Kurs?

Er entwickelt Fähigkeiten in CSS Codes, CSS Frameworks, CSS Grid, Object Oriented CSS, Responsive HTML und Responsive Web Design.