CSS 301: Responsives Webdesign

1. Willkommen in CSS 301: Responsive Webdesign: Willkommen bei Responsive Webdesign, CSS 301. Dies ist der letzte Schritt in Ihrem CSS Journey, wo Sie mehr über Responsive Webdesign lernen und wie Sie eine Website erstellen, die auf allen Geräten gut aussieht. In diesem Kurs nehmen wir grundlegende CSS und ändern es basierend auf der Gerätegröße, was im Grunde eine kleine Menge an Logik auf unsere schönen Websites mit CSS anwendet. Also wissen Sie, wenn eine Website eine Sidebar auf Desktop-Ansicht hat, aber dann verkleinern Sie Ihren Browser und plötzlich gehen Dinge irgendwie weg und Menüs erscheinen in Sachen verstecken. Das ist reaktionsfähiges Webdesign. Das ist es, was wir in diesem Kurs machen werden. Hi, ich bin Caleb Italiener. Ich mache seit 20 Jahren Websites. Ich unterrichte jetzt seit etwa acht Jahren Online-Codierung. Und heute werde ich Sie durch CSS 301, Responsive Web-Design, unterweisen. Wenn Sie schöne Websites machen möchten, die auf Ihrem Desktop, Laptops, TVs, Tablets, Handys,so ziemlich jedem Gerät gut aussehen Laptops, TVs, Tablets, Handys, . Dann ist dieser Kurs absolut für Sie. Willkommen bei CSS3 u1 Responsive Web-Design. Und ich freue mich darauf, Sie in dieser ersten Lektion zu sehen. 2. Das Meta-Element für Viewport: Alles klar, um mit Responsive Webdesign zu beginnen, müssen wir tatsächlich sicherstellen, dass wir ein Meta-Element in unserer HTML-Seite haben. Also werde ich hier nur eine neue Datei erstellen und von Nur-Text zu HTML wechseln. Und ich benutze VS-Code. Dies ist nur der Texteditor, den ich ausgewählt habe. Und wenn ich HTML-Doppelpunkt fünf mache, und ich werde das nur einen Hauch größer machen. Wenn ich HTML-Doppelpunkt fünf mache, sehe ich dies m bei der Abkürzung. Ich kann dann Tab drücken und es gibt mir alles, was ich brauche. Es gibt mir die HTML-Sprache, die schön ist. Es gibt mir UTF-8 für die Zeichencodierung, mit der Sie Dinge wie Emojis auf Ihrer Seite haben können. Und dann haben wir diese Linie, und das ist die wichtige. Der Meta-Name ist gleich dem Ansichtsfenster. Der Inhalt ist gleich der Breite, entspricht der Gerätebreite und der anfängliche Maßstab ist 1. Das ist wichtig. Wir wollen das genau so halten, wie wir es sehen. Und was das tut, ist, dass es unserem Browser erlaubt zu sagen, okay, also wird dies eine responsive Seite sein. Wenn Sie also Seiten haben, an denen Sie arbeiten, alle Websites, an denen Sie arbeiten und sie reaktionsschnell machen möchten. Stellen Sie sicher, dass Sie dies dem Kopfbereich Ihrer Seite auf jedem einzelnen HTML-Element oder Element hinzufügen , aber jedes HTML, stellen Sie sicher, dass Sie dies in jeder Punkt-HTML-Datei haben, die Sie haben. Und das wird sicherstellen, dass Ihr CSS so handelt, wie wir es mit Responsive Webdesign wollen . 3. Media: Okay, lassen Sie uns einen Blick auf die Medien-Abfragesyntax werfen. Was ich hier tun kann, ist, dass wir dies in einem internen Stil mit dem style-Attribut tun können oder das Element nicht zuweisen. Oder wir können dies innerhalb von externen CSS tun. Ich werde das direkt in diesem Dokument tun, damit Sie genau sehen können, was ich mit HTML und CSS nebeneinander mache. Also würden wir typischerweise ein Element wie unser Körper auswählen. Und wir könnten sagen, die Hintergrundfarbe wird blau sein. Und lassen Sie uns diese Seite als index.html speichern. Und meins ändert sich immer hier. Lassen Sie uns es zurück zu regulären HTML ändern, nicht zu Django-Vorlagen. Und so wird das uns geben, der Körper, Körperelement wird eine Hintergrundfarbe von blau haben, k. Dies wird hässlich sein, aber das wird eine gute Demonstration sein. Also lasst uns zu einem Browser gehen. Ich benutze nur Chrome hier. Ich kann zu Datei gehen, Datei öffnen, meine index.html auswählen. Wir haben einen blauen Hintergrund k. das ist ziemlich hässlich, aber er bekommt den Punkt hier drüben. Nun, was ich tun kann, ist mit der rechten Maustaste Inspect. Und Ihr Panel sieht vielleicht etwas anders aus als meine. Ich denke, meine ist nur dunkler Modus. Und das wird meine Einstellung irgendwo sein. Einstellungen. Einstellungen, Einstellungen. Ja, Thema, dunkel, Licht erfordert ein Nachladen. Ich will nicht nachladen, aber ja, du kannst es dort ändern, wenn du willst. Also, was das tut, ist es uns erlaubt, diese kleine Schaltfläche hier zu klicken, die Gerätesymbolleiste umschalten. Und das wird die Breite unserer Seite ändern. Und das macht unsere Seite ansprechbar. Und so ist es viel wie, Ihren Browser links und rechts zu schrumpfen, aber das macht es tatsächlich richtig, so dass es auf diese Weise ein wenig genauer wird. Wir können auch sagen, reaktionsschnell, aber auch hey, lassen Sie uns versuchen, wie ein iPhone oder ein iPad Pro oder solche Dinge. Und es wird es automatisch für uns dimensionieren. Oder wir könnten einfach reaktionsschnell und eine regelmäßige Breite hier tun. Die meisten Dinge basieren also. Die meisten Responsive Web-Design funktioniert nicht von der Breite Ihres Geräts, sondern von der Höhe. Und lassen Sie uns voran und setzen Sie dies auf 100% zurück. Das ist riesig und lass uns das einfach kleiner machen. Also okay, hier passiert nichts. Responsive Web-Design ist, wenn wir sagen, wenn diese Gerätebreite eine bestimmte Breite ist, entweder größer als, kleiner als oder zwischen zwei Größen, ändern Sie diese Hintergrundfarbe. Und so sieht es in Medienklammern, max. Breite so aus. Und welche Breite wollen wir ihm dann geben? Sagen wir 640 Pixel. Und dann können wir auch hier drinnen sagen. Also wickeln wir eine Medienabfrage um mehr CSS. Machen Sie, dass der Körper eine Hintergrundfarbe von Rot hat. Und so bei 640 Pixeln und darunter, weil es eine maximale Breite haben wird, wir gelernt, dass NCSS gut 1640 Pixel und unter wird diese Hintergrundfarbe zu rot ändern. Also lassen Sie uns voran und aktualisieren Sie diese Seite und reaktionsschnell. Lassen Sie uns voran und ändert sich zu 641. Nichts, 640 wird rot. Und wir können sehen, wenn ich hierher ziehe. Jetzt ist das ein wirklich gutes Beispiel. Es ist ein hässliches Beispiel, aber es ist ein wirklich gutes Beispiel für responsive Webdesign. Lassen Sie uns also noch einmal einen Blick auf diese Syntax werfen. Ich habe mein regelmäßiges Styling hier oben. Was ich normalerweise passieren möchte, könnte es am Körper sein, auf Klassen, Ideen sein. Sie würden nach Attributen auswählen, alles, was Sie möchten. Es ist Ihr normales CSS, das hier oben geht. Und dann unten machen wir Media-Klammern, maximale Breite, die Breite, die Sie wollen, geschweifte Klammer und dann Ihr reguläres CSS hier und beenden dann diese geschweifte Klammer. Und wir können das auch zusammenbrechen. Es sieht also ein bisschen mehr so aus. Und wir setzen einfach unser CSS oder reguläres CSS hinein. 4. Was ist zuerst mobilen mobile: Okay, schauen wir uns mal an, was Handy zuerst ist. Du siehst eine Menge Leute, die zuerst mobil sagen. Nun, zuerst, was ist zuerst mobil? Mobile zuerst bedeutet, dass Sie eine Website zu machen, um auf Ihrem Handy zuerst gut aussehen. Also, was ich hier getan habe, war, dass ich das auf absolut keinen Regeln überhaupt gestylt habe. Und wir wissen, wenn es keine Medienabfrageregel , dass dieses Styling hier nur angewendet wird. Decken über jeden Gerätetyp, jede Gerätebreite. Und dann, was ich sagte, war, hey, eigentlich, wenn diese maximale Breite 640 Pixel oder darunter ist, das ist, was Max-Breite bedeutet. Dann ändere das. Aber Mobile First ist die Idee, dies Gegenteil zu tun. Also mobil würde zuerst sagen, hey, machen Sie den Hintergrund des Körpers rot. Und dann mit einer Mindestbreite von 640 Pixeln, ändern Sie diese Hintergrundfarbe in Blau. Und so alles, was wir hier tun, ist es umzukehren. Wir sagen, die ganze Zeit, mach die Hintergrundfarbe rot. Und dann auf einer minimalen Breite und bis 640 Pixel und höher ändern Sie diese Hintergrundfarbe zu blau. Von diesem letzten Video bis zu diesem Video werde ich diese Seite aktualisieren und wir werden sehen, dass nichts passiert. Also lasst uns das größer machen. Und es bleibt blau. Und dann machen wir es kleiner, kleiner, kleiner. Und wenn wir auf 640 runter sind, können Sie sehen, dass es rot wird. Und das macht genau das Gleiche wie das, was wir vorher getan haben. Nur wir tauschen, wo wir schreiben, unsere Codes sagen, hey, alles hier muss zuerst für Handy sein. Und dann auf einer minimalen Breite und nach oben wollen wir tatsächlich, dass sich diese Farbe ändert. Und jetzt schreiben wir Code für Telefone zuerst und passen sich für einen Desktop an. Während wir im letzten Video gemacht haben, haben wir Code für einen Desktop oder Tablet oder etwas Großes geschrieben . Und dann sagten wir, hey, tatsächlich, wenn diese Minute, wenn die Seitenbreite klein genug ist, ändern Sie sie. Und so ist man zuerst Desktop, man ist zuerst mobil, und das ist zuerst mobil. Sie werden oft sehen, wie Leute sagen, dass Mobile-first besser ist. Ehrlich gesagt, werden Sie mehr Menschen sehen, die Desktop zuerst css mehr schreiben , als Sie ein schreiben werden, mehr als Sie sehen werden, um Menschen schreiben mobile-first CSS. 5. Reaktionsfreudige Bilder: Werfen wir einen Blick darauf, wie man ein Bild reaktionsschnell macht, denn standardmäßig sind sie eigentlich nicht wirklich so reaktionsschnell. Und so gehen wir voran und öffnen eine neue Registerkarte und lassen Sie uns zu einem Splash.com gehen. Und lassen Sie uns nach einer Art von Malerei suchen. Sicher, gut genug. Was ich hier tun werde, ist, dass ich mit der rechten Maustaste klicke. Kopieren Sie dieses Bild. Nein, kopieren Sie die Bildadresse, nicht das Bild, sondern die Bildadresse. Und dann kann ich das in meinem Browser öffnen. Und wir haben dieses Bild. Cool, das funktioniert, das ist, was ich in unserem HTML will. Lassen Sie uns voran und fügen Sie ein Bild hinzu. Wir haben also kein Bild hier drin. Img Quelle wird sein, was auch immer diese URL ist und das, alles, das, alles, was es malen wird. Wenn ich hier zurück zu meiner Seite gehe, sehe ich dieses Bild. Und dieses Bild reagiert wirklich nicht, bis die Seite zu groß wird und dann reaktionsschnell wird. Das ist nicht immer das, was wir eigentlich mit Responsive Web-Design wollen, die meiste Zeit, was wir wollen, ist zu sagen, dass dieses Bild wird wie 50% der Breite die ganze Zeit sein wird. Und das bedeutet, selbst jetzt, 50%, nun, es sind eindeutig nicht 50, 50% Prozent würden irgendwo hier sein. Dies sollte immer noch schrumpfen, aber es ist nicht, es wird nicht verkleinert, bis es tatsächlich die maximale Breite des Ansichtsfensters erreicht hat. Selbst dann erkennt es nicht wirklich an, dass sie eine Grenze sein sollen, kein Rand, sondern Polsterung oder Rand um den Körper auf der rechten Seite dort. Die Dinge werden hier also etwas schrullig. Und wir können, wir können diese Arbeit besser mit einem reaktionsfähigen Bild machen. Was wir also tun können, ist, anstatt unseren Körper zu verändern, können wir unsere IMG ändern. Und wir können dies eine Breite von, sagen wir, 100% und eine Höhe von Auto geben . Und das wird nur Auto berechnen die Höhe für uns. Jetzt wollten wir nicht 100%, wir wollten 50%. Und lasst uns einfach diese größere Auffrischung machen. Und Sie können sehen, dass das Bild kleiner wurde und es bei 50 bleibt, 50% Prozent sind genau in der Mitte dieses X, glaube ich. Wenn wir also direkt nach unten gehen, können wir sehen, dass das 50% ist und es wird dort bleiben, egal in welcher Größe die Seiten, es wird dort bleiben. Und so ist das reaktionsschnell. Was wir jetzt tun können, ist, dass wir dies noch reaktionsfähiger machen können. Und wir können sagen, wenn die Seite eine maximale Breite von 640 Pixel hat, können wir es 100% Breite machen. Vielleicht habe ich dich dort verloren. Also in der letzten Lektion sprachen wir über reaktionsschnelle erste, mobile First Responsive Web-Entwicklung. Lassen Sie uns diese ein wenig mischen und abgleichen. Also, jetzt lasst uns Medien machen. Max. Breite: 640 Pixel. Es ist also sehr ähnlich, aber genau das Gegenteil. Die Syntax ist also die gleiche, aber das heißt ab 640. Das sagt von 640 runter. Wählen Sie dieses Bild aus und geben Sie ihm eine Breite von 100%. Nun, da wir wissen, wie CSS von oben nach unten funktioniert, können wir sagen, wählen Sie dieses Bild, geben Sie ihm eine Breite von 50%, geben Sie ihm eine Höhe automatisch, schließen Sie das Bild. Wir müssen hier nicht die Höhe Auto angeben weil alles, was wir tun, ist, diese Breite hier zu überschreiben. Das ist alles, was wir überschreiben, wird automatisch die Höhe von Auto erben. Es ist also sehr ähnlich wie beim Schreiben. Höhe ist „Auto“. Aber unser Browser wird das sowieso vom Code in Zeile 13 hier erben, also müssen wir das nicht schreiben. Lassen Sie uns voran gehen und speichern, aktualisieren und sehen Sie sich das an. Immer wenn die Seite gelesen wird, erhält das Bild die volle Breite. Also 505050, fünfzig null hundert Prozent, den ganzen Weg runter. Und so haben wir jetzt ein wirklich ansprechendes Bild. 6. Responsive Einbettungen: Willkommen zurück. Lassen Sie uns über reaktionsschnelle Einbettungen sprechen. In diesem Video nehmen wir ein Video, einen iframe, und wir werden es reaktionsschnell machen. Jetzt ist die Sache, ist, wenn wir zu Youtube gehen und wir auf Teilen klicken und wir erhalten, dass Einbettungscode. Standardmäßig reagiert dies nicht. Und wenn ich auf unsere Seite zurückgehe und sie einfach unter unser Bild werfen, HR. Und lassen Sie uns das einfügen. Wir werden sehen, dass es eine Breite hat, eine hartcodierte mit einer 5-6, hartcodierten Höhe von 315. Und dann ein paar andere Müll da drin, von denen wir nicht wirklich wissen müssen. Der SRC ist hier der wichtigste. Das ist unser YouTube-Video. Gehen wir also voran und aktualisieren Sie diese Seite und lassen Sie uns nach unten scrollen. Und wir haben dieses Video. Nehmen wir an, wir wollen, dass dies tatsächlich volle Breite hat. Was wir das tun können, indem wir sagen, Breite ist gleich einem 100%, aber dann müssen wir herausfinden, eine 100%. Was ist das für eine Höhe? Was ist das Seitenverhältnis? Die ganze Zeit müssen wir dieses Seitenverhältnis ununterbrochen herausfinden. Und das können wir nicht tun. Aber was wir tun können, ist, etwas clevere Mathematik zu schreiben, um es für uns zu tun. Und so werde ich das straffen, damit wir uns hoffentlich alle auf einer Linie sehen können. Jetzt schieben Sie das nach oben. Iframe wird über das Bild gehen und die HR wird den iframe gehen. Also lassen Sie uns voran gehen und diese minimieren. Nun, was wir hier tun wollen, und das ist ein bisschen ein CSS-Trick, ist, dass wir einen Container umwickeln wollen. Und so nenne ich es normalerweise einfach einen Container- und Iframe-Container, so etwas. Und wirklich müssen wir nur in der Lage sein diesen Container auszuwählen und gleichzeitig den iframe auszuwählen. Und was wir hier tun wollen, ist, dass wir diesen Container nehmen wollten, und wir wollen ihm eine Position relativ geben und das Überlaufen verbergen. Wir lernten über die Position relativ und das Verbergen von Überlauf und Breite, was wir als nächstes verwenden werden, alle NCSS, eins zu eins NCSS zu O1. Sie sollten also schon mit diesen vertraut sein. Also lasst uns voran gehen und diesen Behälter packen. Und sagen wir, die Position ist relativ und der Überlauf wird auf diese Weise versteckt werden, wir zeigen einfach nichts, was außerhalb dieser Box ist. Lassen Sie uns dies eine Breite von 100% geben. Dies wird die gesamte Breite unseres iframes sein. Anstatt also zu sagen, Hey, Respekt zu den 560, schließlich werden wir sagen, machen dies eine Breite von 100% unserer Seite. Hier werden wir ein bisschen knifflig. Wir werden sagen, Polsterung, Top ist 50, nein, 56 Punkt 2-5 Prozent. Und das wird ein bisschen komisch werden. Und der Grund, warum wir das tun, ist, weil, wenn wir 16 mal neun sagen, also, wenn wir 16 geteilt durch neun gehen, nein, das ist umgekehrt. Wenn wir also 16 mal neun sagen, soll es neun geteilt durch 16 sein, bekommen wir 0,5625. Oder wenn wir das mit 100 multiplizieren, erhalten wir 56,25. Und so ist das nur ein bisschen Grundmathematik genau da. Also nahmen wir neun geteilt durch 16, das ist unser Seitenverhältnis, oder 16 mal neun. Und dann gab es uns eine Dezimalzahl und dann sagten wir mal es um eine 100, um uns die tatsächliche Zahl zu geben. Das ist unser Prozentsatz. Das wird uns eine Polsterung von 56,25% geben. Jetzt möchten wir diesen iframe auswählen, und wir haben nicht immer Zugriff auf diesen iframe. Lassen Sie uns also keine Klasse oder eine ID oder irgendetwas geben, aber sagen wir jeden Container, der einen I-Frame darin hat. Wir könnten sagen, Position absolut, oben 0, links 0, unten 0, rechts 0. Und das wird es einfach den ganzen Weg hinausstrecken. Diese, die auch zusätzliche Polsterung oben auf dem Kopf als 16 mal neun Polsterung auf der Oberseite hat. Nur für ein gutes Maß, lassen Sie uns voran und geben Sie diesem eine Breite von 100% und eine Höhe von 100%. Technisch gesehen wird das nicht nötig sein, aber es tut nicht weh, es da drin zu haben. Lassen Sie uns voran und speichern Sie diese Seite und gehen Sie zurück zu Google. Und wenn wir aktualisieren, wird nicht nur der iframe oben sein, sondern es wird die gesamte Breite dieser Seite einnehmen. Also lasst uns auffrischen und herausfinden, was es hier tut. Schau dir dieses riesige, riesige Video an. Und so können wir dies reagieren, indem wir dieses Hallo, hallo, hallo, hallo, hallo reaktionsschnell, einbetten, responsive YouTube-Video, das ist wirklich schön. Also eigentlich, was das hier tut, ist, etwas wie eine schöne Demonstration zu schaffen. Also haben wir gerade eine hässliche Desktop-Seite gehabt. Aber wenn wir nach unten zur mobilen Ansicht scrollen, wo der Hintergrund rot wird, beginnen die Dinge zusammen zu klicken und es beginnt, ein wenig schöner aussehen. Und genau das wollten wir tun. Wir wollen, dass sich unser Website-Layout ändert, zum größten Teil mit einigen Bits und Bobs hier drin. Wir möchten, dass sich diese Dinge basierend auf der Breite Ihres Geräts ändern. 7. Mehrere Medien-Abfragen: In Ordnung, lassen Sie uns einen Blick auf mehrere Medienabfragen werfen. Also lassen Sie uns voran und erstellen Sie eine neue Box. Und es wird nur „Box“ genannt und wir werden noch nichts damit machen. Und innere HTML, lassen Sie uns Box erstellen und hier gibt mir diese m es Abkürzung, slam die Tab-Taste und wir haben eine Box. Nehmen wir also an, diese Breite wird 400 Pixel betragen, die Höhe wird 400 Pixel betragen. Es wird eine Grenze zehn Pixel, soliden schwarzen Rand, Rand, Rand, Rand, Rand 50 Pixel und Auto geben. Also ist es eine Linie, die in der Mitte. Und wir werden die Hintergrundfarbe ändern, enorme Veränderung der Hintergrundfarbe, Sport, und das ist langweilig. Ändern wir den Umrandungsradius. Und es wird standardmäßig einen Grenzradius von nichts haben. Also, was wir jetzt tun können, ist, dass wir diese Medienabfragen geschrieben haben, eine für min width, eine von max width. Wir können die zusammenstellen. Wir können sagen, fügen Sie Medien. Nehmen wir an, eine maximale Breite von einhundert, zehnhundert Pixel und eine Min-Breite von, sagen wir 700 Pixel. Und dann können wir die Box wieder auswählen. Und wir können diesen Grenzradius auf 50% ändern. Dies wird also diese Box in einen Kreis verwandeln, wenn die Breite zwischen liegt, nicht 100, aber lassen Sie uns 11000 Pixel und eine Min-Breite von 700 machen. Zwischen siebenhundert und zehnhundert Pixeln wird dies ein Kreis sein. Jedes zweite Mal. Das wird nicht diesen Grenzradius haben. Es wird also wie ein Quadrat aussehen. Lassen Sie uns voran und aktualisieren, öffnen Sie Chrome, aktualisieren Sie unsere Seite. Und wir haben diese Kiste. Also lasst uns das machen. Also sind wir jetzt bei 537. Wenn wir bis zu 700 gehen und nur langsam scrollen, dass bis zu 700, werden wir sehen yep, 700 Änderungen zu einem Kreis. Und dann wird es den ganzen Weg bis zu 1000 gehen. Und dann, wenn es 1000 trifft, wird sich von 1000 zu einem Quadrat ändern. Das heißt also jederzeit, dass diese reaktionsschnelle Breite hier zwischen 1700 liegt , machen Sie es zu einem Kreis. Dies ist ein hässliches Beispiel, aber dies ist ein starkes Beispiel, um Ihnen zu zeigen, dass Sie max-width und min-width zusammen verwenden können. 8. Ein responsives Layout erstellen: Okay, lassen Sie uns mit etwas Echtem arbeiten. Wir müssen eine Art Layout erstellen und es reaktionsschnell machen, weil das, was wir bisher getan haben, Spaß macht. Es ist cool, aber es ist nicht wirklich alles, was in einzelnen Stücken anwendbar ist. Was wir jetzt tun wollen, ist eine Art Flexbox-Layout zu erstellen und es im Grunde zu ändern, so dass es, wenn es von einem Telefon aus betrachtet wird, tatsächlich schön zusammenrastet. Lassen Sie uns also voran und erstellen Sie eine neue Datei. Lassen Sie uns diesen Flexbox Punkt HTML nennen. Und wir ändern es von einer Django-Vorlage in eine HTML-Vorlage. Und lasst uns HTML-Doppelpunkt fünf machen. Und es gibt uns das. Das ist genau das, was wir wollen. Und lassen Sie uns voran gehen und eine Art von HTML-Layout hier erstellen. Wir haben also eine Art Container, der unser Raster oder unser Layout Nummernzeichen Layout genannt wird, weil es eine ID sein wird. Und sagen wir, wir haben hier eine ID für die NAV-Navigation. Eine andere ID für Sidebar, Sidebar hier und eine andere ID für Inhalt, Inhalt hier drin. Jetzt wird dies zu diesem Zeitpunkt wie alles aussehen , weil wir kein CSS angewendet haben. Lassen Sie uns voran und wenden Sie etwas CSS an. Lasst uns Flexbox benutzen. Alternativ können Sie stattdessen auch Grid verwenden, anstatt Flexbox zu verwenden. Ich werde Flexbox verwenden, weil es heutzutage ein wenig beliebter ist. Aber Grid ist auch wirklich gute Praxis. Also, wenn Sie nach guter, guter Praxis suchen , würde ich sagen, hey, versuchen Sie es mit Flexbox und nach diesem Video, versuchen Sie es auch mit Grid. Gehen wir also voran und wählen Sie dieses Layout aus. Und sagen wir, es wird Display Flex sein. Und wir werden sicherstellen wollen, dass das umhüllt. Und wir haben auch etwas über Flexbox und CSS 201 gelernt. Du solltest damit etwas vertraut sein, aber ich werde es langsam nehmen und nur für den Fall, dass du es nicht bist. Flex Rap, wir sagen „Wrap“. Und was das tun wird, ist, anstatt all diese nebeneinander zu machen, sagen wir, hey, wenn diese Elemente zu breit für die Seite sind, werfen Sie sie auf eine neue Zeile. Und so lassen Sie uns hier rüber gehen, wiederverwenden diese Registerkarte Datei, Datei öffnen, Flexbox dot HTML, und wir sehen nichts Nützliches. Diese sind jedoch nebeneinander, also tut es tatsächlich etwas Nützliches. Es ist nur, dass wir noch nicht ganz da sind. Lassen Sie uns voran und wählen Sie dieses nav nach seiner ID. Nun geben wir ihm eine Flex-Basis von 100%. Geben wir dem eine Grenze. Unten. Ein Pixel-Solid, fügen Sie einen OCC hinzu, sehen Sie so etwas. Das ist vielleicht nicht dunkel genug. Aaa, etwas dunkler. Und lasst uns erfrischen. Okay, also ist die Navigation da oben. Es ist es, die Dinge runter zu stoßen jetzt, weil, wie wir gesagt, Flex-Basis ist eine 100%. Machen wir die Sidebar. Lassen Sie uns diese 20% Breite geben. Gehen wir also voran und wählen Sie die Seitenleiste mit Flexbox aus. Und wir wieder, wir verwenden nicht Breite Ihre Unkraut Flex Basis. So wird die Flex-Basis 20% sein und die Grenze rechts wird ein Pixel solide sein. Lassen Sie uns es mit der Navigation AAAA übereinstimmen. Okay, und das kommt gut zusammen. Und dann wird der Inhalt nur den Rest der Seite erweitern. Eigentlich wird es nicht standardmäßig. Aber wir können es den Rest erweitern. Lassen Sie uns also voran gehen und wählen Sie den Inhalt aus und geben Sie diesem eine Flex-Basis von 100% minus 20%. Es nimmt also 100% der Seite ein, nicht eine 100. Wir wollen 80% da drin. Und nur damit wir wissen, wo wir arbeiten, um ein Pixel zu begrenzen, solides Rot. Und du hast mich oft gesehen, wie ich das Pixel mache. Oh, okay, also läuft das tatsächlich in eine interessante Sache. Dies stieß auf eine neue Linie. Was wir vergessen haben zu tun, und wir lernten darüber und CSS zu U1 als auch war, lassen Sie uns alles auswählen. Und sagen wir, die Box-Dimensionierung muss Border-Box sein. Und das wird es einfach wieder da reinbringen. Und was das tat, war, dass es sagte, hey, da ist diese rote Schachtel. Es hat eine Breite von 80% plus ein Pixel auf beiden Seiten. Für diese Grenze. Was hat die Border-Box getan? Box-Dimensionierung Border-Box. Es heißt, eigentlich sind Sie zu 80% einschließlich dieser Grenze. Also mit der Grenze sind es 80% und dann irgendwie stieß es da rein, weil dies Pixelpräzisions-Layout ist. Es ist jetzt, dass es ein wenig berührt. Nehmen wir an, der Körper muss sein, weil ich nur möchte, dass das etwas anständig aussieht. Der Körper benötigt eine Polsterung von 0, Rand von 0. Und die Navigation sollte eine Polsterung von 20% haben. Nein, nein, 20 Pixel, nicht 20%. Da gehen wir. Sehen Sie dasselbe mit dieser Sidebar und sehen Sie, wie das aussieht. Sieht ziemlich gut aus und sie sehen das Gleiche mit dem Inhalt. Okay, also haben wir da eine Art Layout. Lassen Sie uns dieser Seitenleiste und dem Inhalt einen unteren Rand geben. So Sidebar und Inhalt. Und alles, was ich dort getan habe, war in VS Code, ich klickte an einer Stelle und dann tat ich, Befehl in einen anderen geklickt. Ich glaube an Windows. Es ist, dass Sie an einer Stelle klicken und dann ist es Alt-Klick an einer anderen Stelle. Und wir können Grenze machen. Unten. Ein Pixel solide AAA. Okay, cool. Also haben wir hier eine Art Layout. Wenn wir das ansprechen. Es wird, ja, es wird nicht so funktionieren, wie wir erwarten, dass es funktioniert. Es ist nicht ganz da, es wird ein wenig seltsam und das wird völlig erwartet. Aber was wir bei sagen können, sagen wir 640 Pixel, und wir können diese Sidebar tatsächlich die gesamte Breite überspannen und diesen Inhalt nur ein wenig nach unten werfen. Und so können wir bei Media sagen, und ich ziehe das einfach nach oben. So können Sie sehen, dass auf meinem Bildschirm bei Medien maximale Breite 640 Pixel, lassen Sie uns diese Seitenleiste wählen. Und geben wir ihm eine Flex-Basis von 100%. Und lassen Sie uns den Grenzsatz entfernen. Grenzsatz wird 0 sein. Und lasst uns auch diesen Content-Abschnitt greifen, der derzeit eine Flex-Basis von 80% hat und ihm eine Flex-Basis von 100 als auch geben. Also wird es es runterstoßen. Und so, was wir hier tun können, weil dies im Grunde der gleiche Code ist. Lassen Sie uns beide auswählen. Und lasst uns das einfach ein wenig größer machen, aktualisieren. Und wenn ich das etwas kleiner mache, können wir sehen, wie es nach unten rutscht und du siehst, wie es dort in seine eigene kleine Linie stößt. Das ist wirklich schön, das ist responsive Web-Entwicklung auf den Punkt gebracht. Jetzt könnten wir damit noch weiter gehen. Gehen wir weiter und machen dies nur ein wenig mehr vergrößert. Nun, was wir damit tun könnten, ist, wenn wir runter zu kommen, sagen wir, 480 ist gut und ich sage 480 Pixel, das wird immer etwas von einer kleineren Gerätegröße bei 470 fünf ist eigentlich der Schraubstock ISIL verwenden wird, wird das verwenden. Lassen Sie uns die Seitenleiste verstecken. So können wir jetzt eine andere Medienabfrage bei Medien max Breite 475 Pixel erstellen. Nehmen wir nur die Seitenleiste und zeigen keine an. Lass es uns komplett verstecken. Und so werde ich die Seite aktualisieren, wo es für 80 gerade jetzt. Und wenn ich gehen würde klicken Sie hier und nur Pfeil nach unten, Pfeil nach unten, Pfeil nach unten, Pfeil nach unten, Pfeil nach unten, Pfeil nach unten. Und es versteckt sich. Sie können sehen, dass ich zwischen 476 und 75 wechseln werde, und es versteckt sich für mich, es tut genau das, was wir tun wollten. Jetzt, da mein Freund reagiert Web-Entwicklung. Kurz gesagt, das ist wirklich alles, was es ist, ist, wenn Sie eine Seite kleiner oder größer machen, werden Sie etwas verstecken und Sie werden im Grunde etwas machen, nehmen mehr Platz, weniger Platz, oder verstecken, oder vielleicht zeigen Sie es, wenn es nur auf dem Handy erscheinen soll. 9. Dein projekt: Ihr Projekt wird mit Flexbox oder Grid sein. Sie können beide verwenden, je nachdem, mit welchem Sie besser vertraut sind. Was ich möchte, dass Sie tun, ist irgendwie von dieser letzten Lektion abheben. Aber ich möchte, dass Sie eine Art Seitenlayout erstellen. Verwenden Sie Flexbox- oder CSS-Raster, je nachdem, mit welchem Raster Sie besser vertraut sind. Und dann stellen Sie sicher, dass Sie eine Navigation haben. Sie haben eine Sidebar und Sie haben ein paar Inhalte da drin. Und dann, wenn Sie Ihre Seite kleiner in der Breite machen, wenn Sie die responsive Web-Entwicklung oder den responsiven Schalter in Ihrem Browser verwenden . Diese Schaltfläche hier, wenn Sie dies verwenden und Sie Ihre Seite größer oder kleiner machen, möchte ich, dass Sie das tatsächlich tun, damit ich größer werde. Das dauert also nicht 20%, sondern 100% und dann etwas verbergen. Grundsätzlich möchte ich nur, dass Sie mit responsive Web-Entwicklung spielen, aber dieses Layout als Beispiel zu verwenden, ist ein wirklich, wirklich gutes Beispiel, wirklich gute Nutzung der responsive Webentwicklung. Also geh voran und gib diesem einen Schuss und fühle mich frei, auf meinen Code hier zu verweisen. Sie können dieses Video zu einem beliebigen Zeitpunkt pausieren und Sie können einen Blick auf das werfen, was ich geschrieben habe. Geh weiter und gib dem eine Chance. Viel Spaß damit, und es muss nicht genau so ausgelegt werden, wie ich es getan habe. Sie können es so auslegen, wie auch immer Sie möchten. Viel Spaß damit, machen Sie es zu Ihrem eigenen. Aber am wichtigsten, stellen Sie sicher, dass Sie ein wenig Erfahrung im Gurt haben , bevor Sie diesen Kurs mit Medienanfragen beenden. 10. Zusammenfassung: Hallo, willkommen, und auch herzlichen Glückwunsch zum Abschluss dieses Kurses, CSS 301, Responsive Web-Design. Das war ein ziemlich kleiner Kurs. Der Großteil von CSS ist wirklich das Lernen, du weißt schon, Dinge wie Anzeige keiner oder Grenze, oder? 0. Diese werden als Deklarationen bezeichnet. Alles, was wir mit Responsive Web-Design gemacht haben, ist gesagt, hey, fügen Sie dieses Meta-Element dort hinzu, das dem Browser sagt, dass dies eine responsive Art von Seite mit CSS sein wird. Und dann sagten wir, richtig, irgendeine Art von Medienabfragen, eine bedingte Logik. Also, wenn die Seite eine maximale Breite von 640 hat, so ist es 640 oder niedriger. Wenden Sie das Styling an, oder wenn es für 70 und niedriger ist, wenden Sie dieses Styling an. Das ist wirklich alles, was es ist. Und so ist das responsive Webdesign auf den Punkt gebracht. Vielen Dank, dass Sie sich die Zeit genommen haben, diesen Kurs zu besuchen. Ich hoffe, es hat dir gefallen. Ich hoffe, du hast etwas Neues gelernt. Ich hoffe, Sie hatten ein wenig Spaß mit Responsive Web-Design. Es ist eine wirklich wichtige Sache, es zu wissen. Vergessen Sie nicht, Sie können immer um Hilfe beim Lernen bitten, Facebook-Gruppe zu programmieren. Sie können mir auch auf Instagram bei Programmierung für alle folgen, oder bei Caleb Italienisch, oder auf Twitter bei Caleb erzählen. Oder du kannst mir auch hier auf Skillenbeteiligung folgen. Und Sie können einfach zu meinem Profil gehen und auf Folgen klicken. Und dann kannst du sehen, wann immer ich einen neuen Kurs habe und ich in letzter Zeit eine Menge Kurse produziert habe. Also hoffentlich werden Sie etwas guten Wert aus, dass, aus Ihrem Skill Share-Premium-Mitgliedschaft bekommen. Nochmals vielen Dank, dass Sie meinen Kurs genommen haben. Mein Name ist Caleb Colleen. Es war eine Freude, Ihnen Responsive Web Design beizubringen. Ich hoffe, Sie einen anderen meiner Kurse zu sehen, aber wenn ich nicht glücklich Programmieren und Spaß haben da draußen.