Reaktionsfreudiges Web-Design: Mobil-zuerst-Ansatz mit HTML5 und CSS3 | Danny Florian | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Reaktionsfreudiges Web-Design: Mobil-zuerst-Ansatz mit HTML5 und CSS3

teacher avatar Danny Florian, KIT | Digital Marketing Agency

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

12 Einheiten (1 Std. 14 Min.)
    • 1. Einführung

      5:14
    • 2. Column 1

      8:26
    • 3. Column Teil 2

      3:08
    • 4. Column Teil 3

      4:04
    • 5. Column

      5:03
    • 6. Column

      3:27
    • 7. Helden und 3 Blocks

      6:06
    • 8. Anwenden von Medienfragen

      8:21
    • 9. Mobile erster Ansatz im Detail

      6:56
    • 10. iPhone

      8:10
    • 11. Flush (Rand zu Rand)

      10:52
    • 12. Footer

      3:48
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

2.328

Teilnehmer:innen

12

Projekte

Über diesen Kurs

Es ist keine Überraschung, dass es mehr Menschen auf ihren mobilen Geräten als die Desktops in der heutigen digitalen Landschaft. In diesem Kurs zeige ich dir die ersten Ansatzes und zeige dir die Grundfähigkeiten, um den Einstieg zu starten.

Wir erstellen eine responsive Website von Grund auf von Grund auf nach, die du zusammen mit dem Gelernten anwenden kannst, was du auf einer bestehenden Website lernst und sie auf deinem mobilen Gerät zum Leben zu sehen.

Mit HTML5 und CSS3 wirst du dich auf den Weg zur Beherrschung von responsives Webdesign machen.

Triff deine:n Kursleiter:in

Teacher Profile Image

Danny Florian

KIT | Digital Marketing Agency

Kursleiter:in

I'm Danny Florian, UX Designer and Founder of KIT Digital Marketing Agency. I started my career as a microbiologist and migrated from the world of microbes to the world of pixels, where I manipulate the DNA of websites and test hypotheses in order to design the best user experience.

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Hallo und begrüßen Sie diese schnelle Einführung in Responsive Web Design. Diese Klasse ist speziell für Anfänger, die lernen, wie man kodiert. Und wir werden Themen wie Medienabfragen und die Grundlagen von Mobile First oder den mobilen First Ansatz behandeln. Mein Unterrichtsstil ist also schnell auf den Punkt gekommen. Und wenn ich schnell zu zwei zog, ähm, ähm, natürlich ist es ein Video-Quartier, also zögern Sie nicht zu drücken, zu pausieren und zurückzuspulen und gehen Sie einfach zurück über die Anweisungen. So fühlen Sie sich frei. Teoh, nimm Screenshots aus deinem Projekt und teile es mit der Klasse. Wir können sehen, wie Sie vorankommen und einige tolle Dinge sehen, die Sie bauen. Ich habe die Footshop-Akte dafür zur Verfügung gestellt. Diese Website wird diese fiktive Website erstellen. Wenn Sie keinen Fotoshop haben, habe ich alle Vermögenswerte zur Verfügung gestellt, die bereits vertrieben wurden. Wenn Sie keinen Fotoshop haben, Wenn Sie also zu der Projektdatei gehen, die ich in den Bildern bereitgestellt habe, erhalten Sie jedes einzelne ausgeschnittene Bild aus dieser Float-Shop-Datei, also ist Fotoshop nicht notwendig, obwohl es sehr empfehlenswert ist, wenn Sie gehen unten Dies dies dieses Feld von welchem Design. Also lasst uns gleich anfangen. Warum mobil? Erstens, die Frage ist wirklich, warum sollten wir uns vor allem entwerfen oder fokussieren oder ein Projekt in der mobilen ersten Denkweise starten? Grundsätzlich ist der Grund, dass Sie begrenzten Platz haben. Wenn Sie also eine Website haben, wissen Sie als eine Tonne von Inhalten, viele Bilder und wenn Sie auf Ihrem mobilen Gerät surfen, haben Sie eine begrenzte Bildschirmseite. Also offensichtlich wird alles geschrumpft. Ähm, weißt du, und wenn eine Website nicht wirklich in der mobilen ersten Denkweise entworfen ist, scrollen Benutzer stundenlang , um Inhalte zu finden , sie suchen. Das ist also so ziemlich der Grund Nummer eins, , und dann ist das unterstützende Argument in Ordnung, also wenn Sie auf einem mobilen Gerät sind, haben Sie eine langsamere und eingeschränkte Verbindung, also haben Sie keine die, ähm ich denke, die Fähigkeit, hi rez Bilder herunterladen, wissen Sie, auf dem Sprung. Entwerfen Sie zuerst in einem Mobilgerät oder entwickeln Sie sich in einer mobilen ersten Denkweise, denken Sie an den Benutzer. Weißt du, vorher, ähm, ich schätze, den ganzen Inhalt zu zeigen, aber der Inhalt sollte König sein. Und dann wollten wir über progressive Verbesserung sprechen, im Grunde auf der grundlegendsten Ebene, die das mobile Gerät sein würde. Und dann, wennder Bildschirm auf Tablet und Desktop zunimmt wenn , fügen wir Mawr-Elemente wie Bilder oder spezielle Animationen und solche Dinge hinzu. Und das basiert auf dem Grundkonzept der progressiven Verbesserung. Wir beginnen mit der einfachsten Form und bauen dann auf, dass für Geräte höherer Prozessorgeschwindigkeit, wie z. B. Das ist also der Trend, den ich nicht sagen würde. Es ist eigentlich wahrscheinlich der beste Ansatz beim Aufbau einer Website heutzutage, nur weil mehr Menschen auf ihren mobilen Geräten surfen. Also empfehle ich dringend, dass Sie den mobilen ersten Ansatz in Betracht ziehen, und ich werde diesen Ansatz in dieser Klasse im Detail übergehen, und dann können Sie wegnehmen Sie wissen, was Sie mögen, was Sie nicht mögen und Sie werden sehen. Es gibt viele verschiedene Tutorials zum Responsive Webdesign, und Menschen tun Medienabfragen auf viele verschiedene Arten. Aber ich finde, dass es auf diese Weise zu tun, der mobile erste Ansatz, es ist der effizienteste und er hält sich an den Fortschritten der Verbesserung, ähm, Prinzipien. Also hoffe ich, Sie genießen die Klasse wieder. Nehmen Sie die Photoshop-Datei, die ich zur Verfügung gestellt habe. Sie können Ihr eigenes Projekt verwenden, oder Sie können die Bilder, die ich bereitgestellt habe, verwenden und beginnen Sie mit dem Erstellen der Website und folgen Sie weiter. Wenn Sie Fragen über die Klasse haben, werdeich sicherstellen, dass Sie schnell auf die Minute antworten. , werde Wenn Sie Fragen über die Klasse haben, werdeich sicherstellen, dass Sie schnell auf die Minute antworten Bitte, bitte, bitte, teilen Sie Ihre Arbeit mit. Ich will sehen, was ihr baut und es einfach mit der Klasse teilen. 2. Column 1: um Responsive Web-Design zu verstehen, müssen Sie verstehen, wie das System funktioniert das Grid-System. Also, was wir hier haben, ist ein 12-Säulen-Gittersystem. Es gibt 10 Säulen- und 16 Säulenrastersysteme, aber es hängt nur wirklich von Ihrem Design ab. Also, was wir hier haben, ist ein Design, das dritte oder drei, äh, Blöcke von Inhalten hat äh, . Ein weiterer Abschnitt , der eine Seite zu sein scheint, ist 50% davon mit hier, und dann haben wir eine voll mit Abschnitt, und dann haben wir einen Abschnitt hier mit fünf Blöcken Inhalt. Es nimmt die volle Breite der Seite und dann einen weiteren Abschnitt hier, in dem wir weitere fünf Blöcke von Inhalten haben. Aber es ist in diesem enthält Elemente. So würde das 12-Säulensystem dafür perfekt funktionieren, weil 12 gleichermaßen in drei unterteilt werden können , während 10 nicht. Sie können 16 Spalte verwenden, aber es wird nur, ah, ein wenig verzwickter mit der Mathematik, was ich Ihnen hier in zweiter Stelle zeigen werde. Also habe ich im Grunde eine einfache Probe von gerade jetzt erstellt. Es reagiert nicht. Es ist etwas reaktionsschnell. Ich meine es ernst. Der Inhalt passt sich an die Breite meines Browsers hier an, aber das ist nicht wirklich verantwortlich Design. Lassen Sie mich Ihnen die Grundversorgung von dem zeigen, was vor sich geht. Also, was wir haben, wenn Sie sich den Code hier ansehen, ist, dass wir diesen Container innerhalb des Containers haben . Wir haben eine Reihe, und innerhalb der Straße haben wir diese beiden Spalten, die 50% des Raumes eingenommen werden. Also fangen wir mit dem Container an. Was für ein Container macht, wenn wir hier zu unserem Design zurückkehren. Wenn wir die Führungen einschalten, ist der Behälter im Grunde von dieser Kante, diese linke Kante zu dieser rechten Kante. Es enthält all dies, all diesen Inhalt innerhalb der angegebenen Menge an Speicherplatz. Nun, wenn Sie zu diesem Abschnitt gehen, geht es von Kante zu Kante. Es ist nicht innerhalb des Containers. Wenn wir also diesen Abschnitt codieren, wissen wir, dass wir die Container-Klasse nicht verwenden werden. Aber für alles andere fällt es schön in dieses, äh , Element. Das ist also, was der Container hier macht. Wenn ich mich also ändern lassen würde, lassen Sie mich meine maximale Breite hier herausnehmen und aktualisieren und Sie werden genau sehen, was ich meine. Der Container existiert also nicht mehr und benötigt nur 50% des Browser-Speicherplatzes. Es ist nicht in diesem 1200 Pixel Raum enthalten, den ich vorher dort hatte. Wenn Sie also Ihren Container einstellen, setzen Sie ein maximal zulässiges mit ein, also ist es maximiert, richtig? Es gibt 1200 Pixel und genau dort schrumpft. Nun, ich möchte, dass Sie etwas bemerken. Sehen Sie das, dieser Rand hier auf diesem Container-Weg gibt ihm eine 20 Pixel feste dunkelgraue Ordnung. Wenn wir also anfangen, das zu reduzieren, was passieren wird, ist, dass der rechte Rand verschwinden wird. Und wenn Sie sich meine Bildlauf ansehen, ähm, Option, es erscheint da oben, meine Bildlaufleiste erscheint. Das ist also etwas, worüber ich in einer Sekunde sprechen werde. Und es ist eine schnelle und einfache Lösung. Und es ist etwas zu beachten, wenn Sie Ihr Gitter bauen, also der nächste Teil ist die Straße. Also, wenn Sie daran denken, lassen Sie mich zu diesem Bild hier zurückkehren. Wenn Sie also an Spalten denken, denken Sie normalerweise an Tabelle, so dass Sie innerhalb einer Tabelle haben, ähm, diese vertikalen Spalten sind, die in den horizontalen Straßen enthalten sind. Das ist genau das, was wir hier tun. Die Zeile ist der horizontale Container für diese Spalten. Also innerhalb einer Zeile haben Sie X Anzahl von Spalten. Das ist alles, was der Streit macht. Und dann kommen wir zu jeder Spalte. Also haben wir diese Def-Klasse mit Blau nur für den Becker und blies in die Klasse mit Grün , und wir gaben ihm diese Klasse. Siehe Öl Dash sechs, Spalte sechs. Also in diesem 12-Grid-System, um, um, nur mit gesundem Menschenverstand hier, nennen Sie diese Klasse, die ich von c o L Dash sechs gegeben habe, im Grunde bedeutet für mich, dass es sechs Spalten des Raumes eingenommen hat. Also, wenn wir hierher zurückgehen und, ähm, wir gehen zurück zu dem, was tatsächlich in der Eigenschaft identifiziert wird, sehen wir, dass die Breite für Klasse Spalte sechs auf 50% gesetzt ist. Was Sinn macht. Offensichtlich, wissen Sie, wenn wir ein 12 Grid System halb 12 haben, dann sind es sechs. Also, natürlich wollen wir sechs Spalten die Breite von 50% geben, die 50% von 12 ist. Also lasst uns eine andere Mathematik hier durchgehen, also sagen wir, ich will diese dritte geben . Also werde ich das kopieren. Da ist, äh, diese Spalte sechs. Und jetzt werden wir das in C. L. Dash vier ändern L. . Und der Grund ist, dass Sie 12 in drei teilen können, gleichermaßen mit Gewalt oder offensichtlich 12 ungefähr 34 Also, wenn wir wirklich frisch, offensichtlich werden wir nicht die gleichen Drittel bekommen, weil ich nicht hat es hier in meinem CSS identifiziert. Also lasst uns weitermachen. Ich werde das hier nur ändern, Teoh 1/3 und wir werden herausfinden, was 1/3 von 12 ist. Also, wenn wir öffnen unseren Rechner und Sie tun, ähm, wenn wir brauchen eine drei Spalte so drei geteilt durch 12 Ich tut mir leid, das ist für so haben wir vier Spalten waren wieder, Denken Sie daran, wir tun dies durch Spalten, nicht durch die eigentliche Mathematik von dem, was Sie brauchen. Also, obwohl wir drei Block-Elemente benötigen, wurden vier Spalten verwendet, um das zu erreichen, weil offensichtlich 12 darüber vorher drei ist. Denken Sie daran, dass dies von der Anzahl der Spalten abgeht, nicht von der Anzahl der Elemente, die Sie benötigen. Also gehen wir zurück zu unserem Taschenrechner hier. Es sind vier geteilt durch 12. Es wird uns etwa 30% geben. Also ist es 33.33333 Also, um das einfacher zu machen, also bekommen Sie, wissen Sie, Sie können mal etwa 100 und 33.3333%. Also, wenn ich zu meinem CSS zurückgehe und diesen Aufruf dieser Spalte 4 erstelle, braucht es eine Breite von 33,333 und was ich tun werde, ist zurückzugehen. Geh zum achten von diesem kleinen Ort, weißt du, und du wirst sehen, warum. Hier in einer Sekunde, wir werden nur 33,333% hinzufügen und nur den Bildschirm hier aktualisieren. Und du siehst, dass es das dritte von diesem, äh, mit, ähm, Eltern Platz einnimmt äh, mit, ähm , , . Nun, eine Sache zu bemerken ist, dass sie nicht nebeneinander ausgerichtet sind, und da kommt der Schwimmer ins Spiel. Also für jede Spalte wollen wir sie immer nach links schweben, und das wird uns genau das geben, was du siehst, also um diese letzte zu sehen, lass mich das in Blau ändern. Da gehen wir. So wird jeder 1/3 dieses zulässigen Raums aufgenommen. 3. Column Teil 2: Im vorherigen Video haben wir übergegangen, wie man eine Spalte für 1/3 des verfügbaren Abstands erstellt. Also, was ich hier eingerichtet habe, ist eine Spalte vier in einer Spalte. Sechs. Also, anderen Worten, es gibt vier Spalten in diesem Block von Inhalten und sechs darin. Also, wenn du den Monat mathematisch hättest, bekommen wir nur 10. Lassen Sie diesen Raum von zwei hier. Also, wenn Sie das nicht verstehen, denken Sie es im Grunde so. Also 100% dieses Raumes würde bedeuten, dass wir 12 Spalten verwendet haben. In diesem Beispiel verwenden wir vier Spalten und sechs Spalten, was sich auf 10 summiert. Also machen wir vier Spalten, die hier enden. Wenn wir weitere sechs Spalten tun 123456 waren nur ein 10. Was uns mehr Ruhe lässt. Mathematisch gesehen wäre der einzige zulässige Platz hier nach dieser sechs Spalte zwei Spalten. Also, wenn wir das in so hinzufügen und die Seite aktualisieren, sehen Sie, dass wir diesen Raum hier jetzt bekommen. Ich habe diese Klasse von Spalte nicht erstellt, um zu steigen. Tun Sie das gerade jetzt, also cl Strich zu, und wir müssen die Breite herausfinden, und wir wissen, dass es links schweben muss. Also lasst uns voran gehen und den Witz herausfinden. Also wieder, dies ist ein säulenbasiertes System. Also verwenden wir zwei Spalten, also zwei geteilt durch die Gesamtmenge Spalten nur 12 wird uns 16 0,6667% geben. Also lasst uns das machen. Und wie gesagt, gehen wir auf die achte Dezimalstelle von 16 Punkt 666666 67 Prozent. Und wenn wir zu unserem Beispiel zurückkehren und uns auffrischen, sehen Sie, dass es sich gut ausfüllt. Also ändern wir uns. Das sind zwei Blues, die den Kontrast sehen können, und da ist es. Also wieder, das Konzept, hier nach Hause zu nehmen oder das Prinzip, hier nach Hause zu nehmen, ist für jede Zeile, die Sie haben, stellen Sie sicher, dass die Anzahl der Spalten gleich der Gesamtzahl Ihres Stützenrastersystems ist, das Sie verwenden. Also, wenn ich 16 Säulenrastersystem verwenden würde, wäre das, was ich hier habe, nur 12. Ich brauche noch eine Spalte vier, um diesen Raum auszufüllen. Aber da wir ein 12-Säulen-Gittersystem für sechs verwenden, ist 10 plus ein weiteres zu seiner 12 und Sie können dieses Cred-Gitter-System bis zu dem Punkt, den Sie verwenden können, weiter aufbauen. Nennen Sie sie 1 12 mal Spalte 34 mal und so weiter, und das ist im Grunde, was Sie Grid-System sind, besteht aus. 4. Column Teil 3: Okay, jetzt, da wir herausgefunden haben, wie wir unser Grid-System mit den Spalten erstellen, müssen wir die unterstützenden CSS-Eigenschaften herausfinden, um einige dieser Probleme zu beheben, die wir haben. So hat die erste Ausgabe in einem früheren Video ernannt, ist, wie dieser Container diesen 20 Pixel grauen Rand hat . Und als wir begannen, die Browsergröße zu verkleinern, sehen wir, dass es von der Seite läuft und wir tatsächlich nach rechts scrollen müssen, um diese Reihenfolge zu sehen . Was hier passiert ist, ist, dass wir hier einen Container mit ah, variabler oder fester Breite haben, und wir fügen darüber hinaus weitere 20 Pixel hinzu. Also werden diese 1200 Pixel tatsächlich zu 12 40, weil wir hier 20 Pixel hinzufügen, 20 Pixel hier, also übersteigt es tatsächlich diesen Raum, den wir ihm geben. Also müssen wir tun, ist, dass wir tatsächlich eine Eigenschaft in dieser Eigenschaft hinzufügen müssen, wird tatsächlich Parks Dimensionierung genannt und die CSS-Eigenschaft, die wir geben werden, ist tatsächlich Ordnung Dash Box. Wenn Sie also die Seite aktualisieren, sehen wir jetzt, dass die richtige Reihenfolge in diesem Raum beibehalten oder bleiben wird , so dass das gleiche Konzept für diese Spalten gilt. Diese Spalten haben eine FIC, die sie haben, sie haben keine feste mit, sie haben tatsächlich eine Variable mit. Also ist diese 50% bei voller Breite hier anders als hier. Offensichtlich können Sie sehen, zum Beispiel, hier diese Spalte vier. Es nimmt an der Größe ab, wenn wir kleiner werden, so dass die Breite auf ein Maximum von 50% eingestellt ist. Aber es sind 50% des zulässigen Platzes, der weiter schrumpft, wenn wir so runtergehen. Also müssen wir diese Kastengröße auf alle unsere Spalten und jede Art von Element hinzufügen, das ist, dass wir hinzufügen, dass wir Ränder hinzufügen oder Padding ist auch. Also lassen Sie mich Ihnen hier ein Beispiel geben. Wenn wir also gehen, um ihn vier anzurufen und hinzuzufügen, lassen Sie mich diese Box entfernen. Nehmen wir an, wir fügen eine Grenze auf der rechten Seite hinzu, damit Grenzrechte ihm 20 Pixel fest geben und lassen Sie uns genau das gleiche Grau machen. Wenn wir also die ersten waren, die Seite haben, sehen Sie, dass es übertrieben rufen Sie ihn auch an. Und der Grund dafür ist das. Kommen Vieren jetzt mehr als diese 33.333%, die wir ihm gegeben. Diese zusätzlichen 20 Pixel machen es größer als diese, diese Breite, die wir ihm gegeben haben. Also, wenn das ist, warum wir diese Box Größe brauchen. Also, wenn wir es wieder hinzufügen und die Seite aktualisieren, bekommen wir Magie. Also, was Box-Dimensionierung tut? Ist es das? Es wendet im Grunde dies an, diese zusätzliche Auffüllung Aufträge oder Ränder oder was auch immer es ist, das zur Breite von was auch immer hinzufügen wird . Was auch immer du es hinzufügst, es fügt es darin hinzu. Also wieder, wenn wir dies entfernen und die Seite aktualisieren, können Sie sehen, dass es damit zugenommen hat. Diese Aktion, dieser 20 Pixel Rand rechts, wird an der Außenseite dieser Spalte 4 hinzugefügt. Und wenn wir Box Sizing Order Box wieder in und aktualisieren Sie die Seite, das ist 20 Pixel bekommen innerhalb dieser 33.33% hinzugefügt, so dass ich hoffe, das macht Sinn für Sie. Es ist ein wirklich einfaches Konzept als es ist, und es ist etwas, das, wenn Sie Ihr Gitter bauen, müssen Sie sich daran erinnern, oxidierende Bestellbox 5. Column: In Ordnung. Die letzte CSS-Eigenschaft, die ich überprüfen möchte, ist das Löschen Ihrer Floats und wie man das mit CSS macht. also Was wiralsobeim Aufbau unseres Rastersystems bemerkt haben, ist, dass jede Säule nach links schwebt . Ich meine, im Wesentlichen, dass wir das tun müssen, damit sie nebeneinander stehen. Wenn wir es nicht tun, stapeln sie sich irgendwie untereinander. Also, den Fluss zu löschen, um herauszufinden, eine sehr gute Möglichkeit, Ihre Floats zu löschen, ist im Wesentlichen responsive Web-Design. Die Art und Weise, wie Sie das tun, ist unsere Zeile, dies im Grunde durch die CSS-Eigenschaft zu erreichen, die ich ihm einen Überlauf verborgen gegeben habe . Also, wenn wir diese CSS-Eigenschaft entfernen und unsere Seite aktualisieren, können Sie sehen, dass unser Container jetzt, das ist dies, äh, diese 20 Pixel dunkelgrau. Es ist zusammengebrochen, und der Grund dafür ist, dass die Container, die die Zeile in der Zeile halten, diese drei Spalten haben. Diese drei Kämme sind schweben Wenn Sie also ein schwebendes Element haben, weiß der übergeordnete Container nicht, wie groß oder wie breit die schwebenden Elemente sind, weil sie schweben. Also was, Sie wollen, ist, dass Sie Ihre Schwimmer löschen wollen. Jetzt bringt in der Vergangenheit die Menschen haben. Sie haben eine Technik ähnlich dieser getan, die einen Tag geschaffen hat, um ihm eine Klasse von klaren und schließen Sie einfach den Dev und nannte es einen Tag. Nun, Sie wissen, dass das wirklich sehr ermüdend wird, wenn Sie diesen Code überall wiederholen müssen , wo Sie schweben, dass Sie schweben, also ist der einfachste Weg, es zu tun, es auf Ihre Zeile anzuwenden. Wie ich schon sagte, diese Klasse überläuft. Wenn wir unsere bezahlten aktualisieren, sehen Sie, dass der Behälter 30 Jahre aus der Höhe und wickelt sich schön um den Inhalt. Das ist eine Möglichkeit, es zu tun. Eine andere Möglichkeit, die Sie sehen, ist, dass die Leute tatsächlich ein Pseudo-Elemente der Zeile vor und nach geschrieben verwenden , so dass Sie Zeile vor einer Anzeigeneigenschaft CSS-Eigenschaft von Clear Oh tun können, tut mir leid, den Inhalt und lassen Sie es jetzt leer und die Anzeige der Tabelle. Also, wenn wir unsere Seite aktualisieren, werden Sie sehen, dass das nichts passiert, weil wir tatsächlich die gleiche Sache enthalten müssen , aber nach So kopieren Sie das ist, dass sie das nach. Oh, und ich vermisse eigentlich gebaut vorher. Da gehst du hin. Okay, also, was das bedeutet? Ist es tatsächlich hinzufügen, Lassen Sie mich tatsächlich einen Kontinent hier setzen. Okay, also dieses Ding, diese Pseudoklasse von davor und danach ist genau das, was es vor der Reihe tut. Es fügt diesen Inhalt und nach der Straße hinzu, fügt diesen Inhalt hinzu und Sie löschen im Grunde den Float. Auf diese Weise ermittelt der Container, der das übergeordnete Element ist, der die Zeile enthält , die Höhe aufgrund dieser Straße vor einer Zeile. Nach jetzt kannst du es tun. So oder so, sie alle haben ihre Vor- und Nachteile. Wenn du es so machst, wie ich Teoh, der Überlauf versteckt ist, dann passiert, wenn du Inhalte brauchst. Nehmen wir an, ich wollte diesen Text außerhalb dieser Zeile schieben und immer noch gut zeigen, mit dieser Methode Überlauf versteckt, wäre es nicht. Also, das ist, wenn ich diese Methode verwenden würde, so offensichtlich zu planen und zu entwerfen, welcher Weg am besten ist . Aber offensichtlich, wenn Sie Inhalt zu Beginn verschieben müssen und Sie es zeigen möchten, sollten Sie vielleicht überdenken, wie Sie Ihr Markup machen. Also wieder einmal, löschen Sie Ihre Schwimmer wirklich einfach. Wenden Sie es einfach auf die Zeile an, die die Spalte enthält, damit Sie die Spalten nie wieder ohne die Zeile verwenden möchten. Dies geht zurück zu unserem Gittersystem und Denken in Bezug auf Zeilen und Spalten. Denken Sie also daran, während Sie Ihr Raster erstellen, stellen Sie sicher, dass Sie entweder Straße vor der Zeile anwenden. Nachher mit Anzeigetabelle und Inhalt. Halten Sie es einfach leer oder verwenden Sie diesen Überlauf versteckt, damit es liegt an Ihnen. Sie haben jeweils ihre Vor- und Nachteile und spielen einfach damit herum. Sehen Sie, wofür Sie es brauchen, Aber die meiste Zeit wird die Verwendung von Überlauf in der Zeile Sie ziemlich weit bringen. 6. Column: Alles klar. Also ging ich voran und baute mein und beendete mein Gehörsystem hier. Wie Sie sehen können, habe ich jede Spalte nummeriert. Gemäß der CSS-Klasse, die ich verwende. So tun die Mathematik, können Sie sehen, dass sechs und sechs 12 55 zu 12 4 mal drei ist 12 3 mal vier ist 12. im Grunde nur sicher, dass jede Zeile bis zu 12 endet. Hier ist meine letzte Reihe. Es verwendet Spalte 12 eine Breite von 100%. Also zögern Sie nicht, das CSS-Stylesheet zu verwenden, das ich zur Verfügung gestellt habe. Es sollte alle diese CSS-Eigenschaften für jede Spalte haben, im Grunde habe ich die Mathematik für jede Spalte herausgefunden . Also rufen Sie in der Stadt und 83,33% nennen ihn 11 und so weiter, so fühlen Sie sich frei, es zu benutzen. Aber ich fordere Sie auf, voranzugehen und zu versuchen, die Mathematik zu machen und zu wiederholen, was ich gerade hier getan , machen Sie Ihr Grid-System. Also im Moment sollten Sie haben, wie Sie die Größe Ihres Fensters hier reduzieren, ähm, Sie sollten sehen, dass jede Spalte nimmt, dass der Prozentsatz, die richtige Menge an Platz, also zum Beispiel, diese Spalte sechs nimmt immer noch 50 50. Selbst wenn wir hier auf , der kleinsten Fenstergröße sind, also wissen Sie, dass es so ist. Es ist keine Antwort von dem, was wir heute Standards nennen, aber es reagiert in dem Sinne, dass es nicht eine feste mit so wie statische Websites, die in gebaut sind , wissen Sie, 1997. Sie haben nicht mit was auch immer 9 68 behoben und wenn Sie anfangen, das Fenster zu reduzieren, müssen Sie nach links und rechts scrollen. Sie wissen, dass sich das wenigstens dem Prozentsatz anpasst. Passen Sie den Prozentsatz der Spalte an das Fenster an, das so schwierig ist, voranzugehen und Ihr Rastersystem zu beenden . Fahren Sie fort, was wir getan haben. Denken Sie daran, dass jede Zeile benötigt. muss bis zu 12 addiert werden. Also, wie Sie fortfahren, hier ist meine Reihe mit, mit all diesen Spalten enden bis zu 12 und es ist wirklich einfach. Halten Sie einfach das Gittersystem getrennt vom Styling. Sie wissen, dass dies Ihr Gerüst ist, also möchten Sie nicht die Farbe Blau für Ihre Spalte enthalten, auch, Also stellen Sie sicher, dass diese Luft trennen Klassen. Deshalb haben wir die Klasse blau, die gibt, dass die Spalte die Hintergrundfarbe blau gibt und sie von der Spalte getrennt ist. Das ist dein gutes System. Also willst du Teoh nicht? Ähm, Sie wissen, enthält Stile, die mit dem Design zusammenhängen. Es ist mehr dein Rahmen. Weißt du, wir reden nur über die Platzierung mit und so weiter. Also, ähm, mach weiter und beende dein „Du bist gut“ -System. Machen Sie einen Screenshot. Wenn Sie auf einem Mac arbeiten, führen Sie die Befehlsverschiebung drei oder vier aus, wenn Sie sich auf einem PC befinden. Ziemlich sicher, es gibt einen Screenshot, ähm, Option auf deiner Tastatur, um einen Screenshot zu machen. Legen Sie es in die Klasse, damit die Klasse sehen kann, und lassen Sie uns wenig, hübsch diese Grid-Systeme sind. 7. Helden und 3 Blocks: In Ordnung, also lasst uns dieses Gittersystem in Aktion sehen. Was Sie hier sehen, ist nur ein einfaches Markup. Ich bin hier nicht zu weit gekommen, habe nur die ersten 2 Abschnitte, den Helden und dann die drei Blöcke hier. Wenn wir also einen Blick darauf werfen, was vor sich geht, wenn wir den Darm einschalten, sehen wir, dass alles innerhalb des Behälters ist, außer diesem Abschnitt direkt hier, zu dem wir in einem Moment kommen. Beginnen wir also zuerst mit dem Hinzufügen des Containers zu dieser Navigation. Wie Sie sehen können, ist es sehr, es ist nur bündig an den Rändern des Browsers, was nicht ist. Das ist nicht das, was wir Kaffee teilen wollen. Also von nachdem Sie Ihr Grid-System erstellt haben. Wenn Sie Ihre eigenen verwenden, einfach sicher, dass Sie über Ihren Stil mit ihm verknüpft sind. Sie, Wie Sie sehen können, Ich verbinde Teoh selbst Blatt. Das ist innerhalb des CSS-Halters, und es wird Hauptpunkt-CSS genannt. Wenn wir das öffnen, können Sie sehen, dass ich bereits ein Migrationssystem eingefügt habe, an dem es früher gearbeitet hat, das genau hier ist, eine Zeile und alle 12 Spalten in meiner Hauptpunkt-CSS-Datei enthält, also stellen Sie sicher, dass Ihre -Container hat den rechten Rand. Null oben unten links und rechts ist automatisch, so dass es auf sich selbst zentriert. Es gibt eine gute Zeit auch, um es eine maximale Breite zu geben. Also lassen Sie uns voran und wenden Sie diesen Container innerhalb unserer naff Elemente an. Lassen Sie uns also eine Klasse von Containern geben. Und wie Sie jetzt sehen können, erhalten Sie das schöne, um, um, 1200 Pixel max mit ihrem Also die nächste, ähm, innerhalb des Containers. Wenn Sie sich an unserem Beispiel erinnern, was ich hier mit meinem Markup mache. Wenn ich diese Marke in diesem Menü in meinem Stylesheet ansehe, schwebe ich die Marke nach links und das Menü nach rechts. Das ist also etwas, das wir mit unserer Reihe klären wollen. Wie Sie sich vorhin erinnern. Hier ist es. Marke Float links und Menü Float. Richtig. Wenn Sie sich an unserem Beispiel erinnern, wann immer Sie etwas schweben möchten, möchten Sie es innerhalb der Straße enthalten, um den Float zu löschen. Also werde ich diesem eine Klasse von Rogen geben, die so sehr frisch ist, dass du es sehen kannst. Diese dieses Menü ist jetzt Höhe gegeben Also, dieser nächste Abschnitt weiß, wo diese Navigation endet durch einen Plan, dass Zeile und Löschen unserer Floats. Gehen wir also zum nächsten Abschnitt über. Wir haben diese drei Blöcke, die drei im Grunde 1/3 und Breite davon sein müssen, 100% mit dem Container. Wenn Sie sich an unserem Beispiel erinnern, müssen wir Spalte vier verwenden, da Spalte vier bis zu 12 endet. Wenn wir also zurück zu unserer Marke hier oben in diesem Abschnitt gehen, wollen wir, , dass Teoh diese drei Blöcke anvisiert, die mit diesem Klassensymbol Abschnitt eingewickelt sind. Hier halten wir das Styling getrennt von der Struktur. Daher möchten wir die Stile nicht zu dieser Spalte hinzufügen. Vier Klasse. Wir wollen es getrennt halten. Deshalb haben wir dieses andere Markup für diesen Abschnitt. Also, wenn wir diese Spalte Floor Klasse anwenden, Teoh jeder dieser Blöcke und da wir bereits gespeichert und eingefügt unser Gittersystem in unser CSS, wenn wir aktualisieren, bekommen wir Magie. Also gehen wir hin. Wir bekommen drei gleiche Blöcke 1/3. Also eine Sache, die Sie bemerken, ist, dass wir den Behälter nicht angewendet haben, also hier ist das Nickerchen. Mit den Containern können Sie sehen, dass 1200 Pixel max mit hält, aber diese Blöcke sind nicht. Also lasst uns voran gehen und das. In diesem Abschnitt haben wir also eine Klasse von Containern innerhalb des Containers. Wir haben die Klasse der Reihe, um die Floats zu löschen. Wenn wir das noch einmal aufgefrischt haben, bekommen wir das schöne enthaltende Element dort. Also eine Sache, die ich möchte, dass Sie auch bemerken, ist an bestimmten Punkten, wie genau dort. Sie sehen, dass jeder Block berührt, wissen Sie, reiben direkt gegeneinander. Also, das ist etwas, das Sie berücksichtigen möchten, wenn Sie Ihr, ähm, Ihr Grid-System erstellen möchten Möchten Sie das Padding direkt auf die Spalten anwenden? Und die meiste Zeit finden Sie dieses Framework wie Twitter, Bootstrap, Oder gibt es eine Grundlage, die sie tatsächlich Padding auf die Spalte anwenden. Also liegt es an dir, würde ich sagen. Gehen Sie weiter und tun Sie es, nur weil es wie Bauen mit Legos ist. Wissen Sie, jedes Mal, wenn Sie diese Spalten verwenden, werden Sie höchstwahrscheinlich den Inhalt wollen. Also in diesem Fall, diese Absatz-Tags nicht zu berühren. Also, nur um hier etwas Zeit zu sparen. Ich werde es nur auf die anwenden, die wir benutzen, was gerade jetzt verlangt. Also, nur um Ihnen ein kurzes Beispiel zu geben, spielen wir oder padding. Also nur an den Seiten möchte ich ihm 20 Pixel geben. Und wenn wir aktualisieren, können Sie sehen, dass jetzt ein 20 Pixel Polster zwischen oder auf der Seite an den Rändern dieser auf diesen Boxen. Also, wenn wir ihn so nahe bringen, können Sie sehen, dass es die Polsterung voneinander entfernt hält. Also im nächsten Video, ähm, werde ich zuerst über Handy gehen und wie ich den Rest dieser Seite vorbereiten kann. 8. Anwenden von Medienfragen: Nun, da wir unsere Spalte drei Klasse zu diesen drei Blöcken hinzugefügt haben, lassen Sie uns über den mobilen ersten Ansatz sprechen. Also, wenn wir diesen Browser über den kleinsten machen, kann es gehen, was ist, dass genau da Sie sehen können, dass dies wirklich nicht so toll aussieht. Also, wie beheben wir das? Und da kommt die Magie ins Spiel. Lassen Sie uns zunächst über Medienabfragen sprechen, damit Medienabfragen dort sind, wo die Magie passiert . Also, wenn ich hier gehe und eine grundlegende Medienabfrage mache, bei Medien und wenn ich kann, tatsächlich bestimmte Medientypen ansprechen. So zum Beispiel kann ich zum Beispielnur Bildschirme oder nur Handheld-Geräte oder Druckgeräte ansprechen, oder kann alle, was eine Option hier ist. Wenn Sie also alles abzielen möchten, was Sie alles tun können, können Sie alle eingeben, oder Sie können es tatsächlich ausschließen, und standardmäßig enthält es alle. Aber wenn Sie bestimmte Stile bereitstellen möchten, die für gelten, sagen wir nur für den Druck, dies ist der Zeitpunkt, dies zu tun. Also, in diesem Fall werde ich es einfach halten und alles tun, was Sie sind willkommen, um das Mozilla-Entwicklernetzwerk zu lesen und alle verschiedenen Medientypen zu sehen. Also hier geht es im Detail über die Druck-, Bildschirm- und sogar Sprachoptionen und einige andere Dinge, die Sie anvisieren können, wie Pixeldichte. Wenn Sie also nur Geräte mit doppelter Pixeldichte wie Retina-Geräte ansprechen möchten , können Sie dies mit Medienabfragen tun. Aber in diesem Beispiel wird es einfach halten. Also meine grundlegende Medienabfrage ist bei Medien alle Geräte oder alle Bildschirme und dann tue ich und Klammern. Und hier haben Sie zwei verschiedene Techniken. Der mobile erste Ansatz verwendet nur Männer, und die anderen Ansätze, die Sie sehen, ein jeder andere tun, sie tun eine Kombination von Max und Mythos Männer mit. Also lassen Sie uns einfach ein Minimum mit 600 Pixeln machen und Curly öffnen und schließen. Und das war's. So richten Sie Medien ein. Großartig. Also, was ich hier tun werde, da wir Spalte vier für diese Blöcke verwenden, werde ich das einfach von hier aus nehmen, also schneide ich das einfach aus und füge es in diese geschweiften Klammern innerhalb dieser Medienabfrage Frieden ein, die dort drin ist wie so hat es nicht schön, und wenn ich mich erfrischen, kann ich sehen, dass nichts passiert sofort. Und der Grund dafür ist, dass diese, ähm, diese Medienabfrage tatsächlich nur passieren wird. Lassen Sie mich es Ihnen schnell zeigen. Also, wenn wir es noch einen anderen Trick, den Sie mit Google Chrome lernen sollten, haben wir hier eine Option. Wenn Sie zu diesen Einstellungen gehen und dann sicherstellen, dass Lineale anzeigen aktiviert ist, gibt es einen coolen kleinen Trick. Wenn Sie also die Größe des Browsers ändern, schauen Sie sich die Lineale an und oben rechts, Sie erhalten Ihre aktuelle Ansicht Port-Größe zu sehen. Was also passieren wird, ist meine Medienabfrage einen Satz auf 600 mindestens mit 600. Das bedeutet, dass, solange alles, solange mein Browser oder dass der Gerätebildschirm größer als 600 Pixel ist, wenn es wahr ist, wird es alles in diesem tun, so dass es eine Breite von 33.33% anwenden wird. Also, wenn wir dieses Fenster weiter dimensionieren, sehen Sie, dass wir näher an 600 ging 900, sobald wir 600 getroffen haben, werden Sie sehen, was hier passiert. Bumm. Sobald du 600 triffst, verlierst du dieses Styling. Da der Browser liest, kann dies keine CSS-Datei sein. Es geht auf die Liste. Es liest also all das. Es liest all dies, und es gibt Spalte vier Nun, Spalte für ist hier, aber es kann es nicht lesen, weil es falsch zurückgibt, wenn es diese Medienabfrage liest. Also, wenn es diese Medienabfrage liest Ja, auf dem Bildschirm Gerät. Also ist alles darunter, und dann, wenn es diese mittlere Breite von 600 Pixeln sieht, ist es wie, whoa, okay, ähm, unter 600 Pixel. Ich bin also bei 5 77, dies gibt falsch zurück, und es kann diesen Stil nicht lesen. Denk darüber nach, wenn wir das haben. Wenn der mobile erste Ansatz dies ist, wenn wir keinen Stil mit der einfachsten Bildschirmgröße anwenden müssen, anderen Worten, die kleinste Bildschirmgröße brauchen wir keinen Stil zu verwenden, dann verwenden Sie ihn nicht. Denken Sie daran, dass Geräte in dieser Größe keinen schnelleren Prozessor haben als ein Desktop-Computer, daher ist es tatsächlich effizienter. Uh, und es ist eine bessere Benutzererfahrung. Also, wieder, alles über 600 das gibt wahr, es wendet dieses Styling für unsere Spalte vier Block an, die diese hier und alles unter 600 sind. Es wendet es nicht an, und deshalb erhalten Sie dieses Stapeln. Das ist also unser erster Bruchpunkt, und wir können weiterhin diese Bruchpunkte machen. Also machen wir es bei Media Paul und dem nächsten Breakpoint. Lass uns 10 24 machen. Also Männer mit 10 24 und Öffnen schließen geschweifte Klammern und dann lassen Sie uns eine weitere hinzufügen. Also lassen Sie uns einfach kopieren und einfügen, um hier etwas Zeit zu sparen. Und lasst uns das letzte 1 zu 12 ändern. 80. Wie Sie sehen können, fangen wir an, hier ein System zu entwickeln. Im Grunde, während ich diese Seite erstelle , werde ich entscheiden müssen, wie jeder Breakpoint aussehen wird. Wenn also, wie Sie hier sehen können, alles in diesem Container enthalten ist und solange es so lange ist, wie es tatsächlich dort ist, möchte ich vielleicht mein Styling ändern. Also wirst du diese Luft finden müssen, meine großen Bruchpunkte und viele Entwickler, ähm, ähm, und Designer werden dir sagen, dass, du weißt schon, an dir kleben, deine 7 68 Welches ist dein iPad, um, 10. 20 Vieren. iPad Querformat Weißt du, das ist sehr, dass du an Geräten festhälst. Sie bleiben an keiner reaktionsfähigen oder agnostischen Responsive-Ansatz. Und Aziz, merkst du, dass du diesen Inhalt kennst? Ja, es sieht gut aus, ähm, aber es muss ein bisschen atmen. Vielleicht mit 700 Pixeln wollen wir vielleicht, dass diese immer noch voller Verstand sind. Damit musst du also herumspielen und dein Urteilsvermögen hier nutzen. Also, weißt du, bei 600 Pixeln sieht das so aus wie Squash. Also, weißt du, ähm, ich möchte diesen 1. auf 7 68 erhöhen dich auffrische, und wenn ich dich auffrische,dass 600 Pixel, es ist immer noch voll mit, und es geht eigentlich nicht in die dritte, bis es 7 68 überschreitet, was genau dort ist. Also, das ist eigentlich ein bisschen besser. Also gehen Sie weiter und wenden Sie diese Technik oder diesen Ansatz auf Ihre CSS-Datei an. Wenn Sie gleich folgen, werde ich Ihnen einen Moment geben, um dieses Video zu überprüfen und irgendwie zu sehen, was ich gerade getan habe. Ich hoffe, es macht Sinn auf diesem nächsten Video. Ich werde mehr im Detail erklären 9. Mobile erster Ansatz im Detail: jetzt, da wir unsere Hände mit dem mobilen ersten Ansatz lassen gehen, um näher auf diesen Ansatz zu gehen. Schauen wir uns also das einfachste oder kleinste Haar in Bildschirmgröße an. Also, genau da ist eine kleine Sekunde zu gehen. Im Moment sind es 400 Pixel in der Breite. Wenn Sie also bemerken, dass hier oben ein Abstand ist und Sie wissen, sagen wir am Telefon,wissen Sie, wissen Sie, die Höhe meines Bildschirms könnte tatsächlich irgendwo in der Nähe sein, Sie wissen schon, etwas mehr Platz dort. Also bekommen wir das abgeschnitten. Sie wissen, dass dieser Aufruf zum Handeln hier. Also, was ich tun möchte, ist, dass Teoh mein Styling, das ich angefangen habe, zu Tode wechselt. Stop, denn dies ist die Telefonansicht. Dies ist der kleinste Vieux Port, den ich habe, und ich möchte dieses Styling ändern. Wenn wir also hier schauen, ist dieses Element eigentlich mein jeder in meinem Aufruf zum Handeln. Also, wenn ich hier zu meinem Stylesheet wechseln, können Sie es hier sehen, aufgerufen in Aktion 81 Also das ist das Stück, mit dem ich arbeiten muss. Also, wie Sie sehen können, ist die Schriftgröße einfach riesig, und ich muss das ein wenig reduzieren. Der Aufruf zum Handeln selbst hat Klopfen an der Spitze, die ich reduzieren muss. Also, was ich tun werde, ist, dass ich mit dem Aufruf zum Handeln beginnen werde. Also werde ich das einfach kopieren und zu der Medienabfrage gehen, die ich hier angefangen habe. Jetzt können Sie nicht jede einzelne Medienabfrage einschließen müssen , , um, gegen, wie, gegen direkt unter, ähm, alles, was Sie können, Sie wissen, können Sie es in Ihrem CSS einbetten. Also schätze ich, was ich zu sagen versuche, ist, wenn ich hier eine andere Medienkarriere mit den gleichen Eigenschaften wie diese Medienabfrage hier mit der Mindestbreite von 7 68 beginnen wollte wenn ich hier eine andere Medienkarriere mit den gleichen Eigenschaften wie diese Medienabfrage hier mit der Mindestbreite von 7 68 beginnen wollte, könnte ich das nicht tun. , könnte ich das nicht Sie werden nicht in Konflikt geraten, es sei denn, die Elemente darin sind genau die gleichen, wie Sie sagen . Dann würde der letzte wirksam gegen den, der früher kam. Also, was ich tun werde, ist, das wirklich einfach zu halten. Hier ist am Ende dieser Abschnitte, die ich skizziert habe . Ich werde eine Medienabfrage einschließen, , also werde ich einfach die Medienabfrage hier machen und ich habe 7 68 gemacht und ich werde das beschleunigen . Dieser Call-to-Action-Snippet. Nun, eine Sache, die ich möchte, dass Sie hier bemerken, ist OK, das ist genau das Gleiche. Also warum, Warum wiederholen Sie mich? Also, was ich hier tun muss, ist zu denken, Okay, welche Stile müssen in diesem kleinsten Vieux Port angewendet werden? Wenn ich also einen Stil mache, der in allen Flughäfen wiederholt werden muss, muss er hier draußen sein, wenn ich einen Stil möchte, der nur auf diesen spezifischen View-Port angewendet werden muss und mit ihm in der Medienabfrage gehen muss. Also, wenn gesagt, ja, ich will, dass die Farben weiß sind, wissen Sie den Import. Also brauche ich das nicht, weil es bereits außerhalb dieser texanischen Medienabfrage-Zeile ist. Das einzige, was ich ein Ziel brauche, ist nur die Polsterung oben. So klopfend oben. Ich möchte, dass es 100 Pixel auf und irgendetwas über 768 Pixel ist. In dieser kleinsten Ansicht, die die mobile erste ist, die sich erinnern, ist das,was das ist. In dieser kleinsten Ansicht, die die mobile erste ist, die sich erinnern, ist das, Dies ist die Stile, die die mobilen Geräte zuerst lesen. Also geht es in diese Liste und es liest all das. Und stell dir vor, wir müssten alles außer Kraft setzen, was es gerade gelesen hat. Und dann, wenn es auf diese Medien erstellt wird. Also, wenn diese Medienabfrage für ein mobiles Gerät waas, dann würden wir alles überschreiben, was es gerade gelesen hat, was eine Verschwendung von Ressourcen ist. Ist eine Rasse, eine Verschwendung von Prozessor. Deshalb funktioniert der mobile erste Ansatz so gut. Ist, dass all dieser Code, der all das CSS ist, das es vom mobilen Gerät gelesen wird , tatsächlich für das mobile Gerät und dann alles in Ihrer Medienabfrage hier gedacht ist. Das ist für alles wie einen Desktop, der einen besseren Prozessor und mehr Platz hat, als er damit umgehen kann. Es kann dies lesen und die Stile außer Kraft setzen. Es ist nur es gerade gelesen früher. Das ist also der ganze Zweck des mobilen ersten Ansatzes. Lassen Sie uns das hier in Aktion sehen. Also, wie ich schon sagte, das ist über 7 68 Wir wollen, dass es eine Polsterung von 100 Pixeln oben hat, was dieser Abstand genau hier ist. Aber in meinem mobilen Gerät, sagen wir, ich wollte die Hälfte davon sein. Also in meinem Aufruf zur Aktion klopfen oben, sagen wir, ich wollte 50 Pixel sein. Also, wenn ich den Bildschirm aktualisieren, können Sie sehen, es kletterte ein wenig 50 Pixel. Das nächste, was ich anvisieren möchte, ist das. Jeder hier, das Rezept, es ist einfach zu groß für mobile Geräte. Ich werde nur kopieren und einfügen. Das heißt Action H eins und in meine Medienabfrage direkt unter dieser ersten Klasse wird es gut ausrichten. Stellen Sie sicher, dass alles richtig und wieder eingerückt ist. Wir wollen, dass die Ränder und in der Marge unten die gleiche Linie bleiben. Die Höhe wird wieder gleich sein. So wollte ich sein. Und auf jedem Gerät oder jeder Bildschirmgröße größer als 7 68 Das Problem ist genau hier. Dies ist für meine mobilen Geräte, also möchte ich, dass dies die Schriftgröße kleiner ist, Also lasst uns die Hälfte angekündigt die 35 Exel. Wir müssen die Zeilenhöhe auf etwas um wie 40 ändern und wenn wir aktualisieren. Wenn Sie Ihr Auge auf der rechten Seite des Bildschirms halten, sehen Sie, dass es produziert. Das ist also genau die Denkweise, die wir haben müssen, wenn wir uns entwickeln. Grundsätzlich, denken Sie mobile zuerst als Ihre mobilen Geräte, die diesen Code lesen, Sie möchten, dass es für das mobile Gerät gedacht ist. Wenn also ein Desktop dies liest, der die größere Verarbeitungsleistung hat, ist es in Ordnung, wenn er alles überschreiben muss, was er gerade gelesen hat. Wenn es diese Medienabfrage hier erreicht und alles darin liest, hat es die Verarbeitungsleistung, alles zu überschreiben, woran es sich gerade erinnert hat. Ich meine, das ist der ganze Zweck des Mobiltelefons. Erstens ist die Verwendung, Ah, diese Idee, Ressource zu sparen, ist und die Benutzererfahrung zu maximieren. 10. iPhone: Alles klar, jetzt geht es zum dritten Abschnitt. So wie Sie hier sehen können, haben Sie bereits die Markierung oben. Lassen Sie mich es Ihnen zeigen. Hier habe ich einen anderen Abschnitt mit einem Container eine Zeile und zwei dieser Spalten. Sechs, das ist 50%. Also dieser linke wird 50% eingenommen. Und das ist richtig, wenn es 50% abgenommen hat. Wie Sie sehen können, war das eigentlich bündig. Lassen Sie mich Ihnen die Stile zeigen, die ich im Raster hinzugefügt habe. Also Spalte sechs. Ich habe eine Polsterung links und rechts von 20 Pixeln hinzugefügt. Also lassen Sie mich das einfach entfernen. Du kannst sehen, wie ich aussah, damit du nicht so schlecht sehen kannst. Aber, ähm, die Polsterung ist notwendig, genau wie wir es hier getan haben. Wenn sie also näher kommen, wissen Sie, dass Sie immer noch diesen Padding haben und der Inhalt nicht flush ist. Deshalb ging ich voran und fügte es in dieser Spalte hinzu. Sechs. Also das Problem, das Sie mit Retina-Bildern bekommen Also das ist ein ziemlich großes Bild hier , und was passiert ist, ist, dass es übergeht. Ein guter Trick und etwas, das Sie Ihren Stylesheets hinzufügen möchten, ist das Ziel . Alle Bilder, indem ich bin J in deinen Stylesheets und mache nur ein Maximum mit 100%. Und was das tut, ist, dass es tatsächlich die Grenzen angibt, die Breite des Bildes an seinen Container passt , die Breite seines Containers nicht überschreiten darf. Also, wenn wir zuerst den Pay-Stuhl, das iPhone auf der rechten Seite sicher passen gut in die 50% und patty, So können Sie sehen, dass wir haben, wenn wir das Inspect-Element tun und wir inspizieren das, äh, es ist Spalte hier, Sie siehe, es hat diese 20 Pixel Polsterung links und rechts sowie dieses. Also jetzt gehen wir voran und wenden Sie den mobilen ersten Ansatz an, so dass Sie sich das hin und her tun werden. Und bis Sie ziemlich zuversichtlich mit dem mobilen ersten Ansatz sagen, dass Sie sehen können, habe ich den mobilen ersten Ansatz nicht angewendet, weil, wie Sie sehen können, den Weg immer noch, dass hässliche 50 50 Split auf diesen Spalten. Sechs. Also, wenn ich dieses Handy zuerst gemacht hätte, hätte ich diese, äh Spalte sechs Eigenschaft in zwei verschoben . Meine Medienabfrage, die ich jetzt tun werde. Also, wie im vorherigen Video, schneide ich die Spalte sechs aus und füge sie in meine Medienkarriere ein. Also jetzt, wenn wir mich auffrischen, um das hier immer noch sehr schnell zu streichen, wenn wir uns auffrischen, bekommen wir das. Also, jetzt fragen Sie vielleicht. Nun, was machen wir jetzt damit? Also, ähm, wenn ein Designer Ihnen ein Design gegeben hat, das die mobile Ansicht zeigt und woher Sie wissen alles angelegt werden muss, dass alles angelegt werden muss, wenn das gedacht wurde, ähm, was ist dann dann? Sie müssen das anwenden. Aber in diesem Fall nicht. Und wenn wir über die Benutzererfahrung nachdenken, wissen Sie, für immer scrollen, ist das wirklich nicht so toll. Ist dieses Bild, das Sie kennen, äußerst notwendig, um eine bestimmte Botschaft zu vermitteln? Nein, ich meine, es sind dieselben Bilder. Dieser Held ist irgendwie überflüssig. Ist das also notwendig? Ich würde nein sagen. Der mobile erste Ansatz in diesem Anwendungsfallszenario wäre also, es einfach auszuschalten. Also, wenn wir uns unsere Marke hier oben ansehen, können wir ein paar verschiedene Dinge tun, so dass wir entweder und erstellen diese Klasse und nur dio mobile Klasse versteckt. Ähm, und wir können es auf das Bild-Haar oder diese ganze Spalte sechs anwenden. Also, nur um es einfach zu halten, werde ich nur hier Klasse erstellen und einfach mobile versteckt machen. Also, wenn wir zurück zum Stylesheet gehen, müssen wir Teoh diese Klasse erstellen. Also denke ich an einen logischen Ort, fügte hinzu, lass es uns zum Raster hinzufügen. Es bezieht sich auf das Framework, und es ist wahrscheinlich etwas, das wir später verwenden werden. Also gehe ich einfach Teoh. , Eigentlich wäre das,wenn ich dort einen Fehler gemacht habe, also wollten Sie auf Mobile angewendet werden. So mobil versteckt und dieser Kerl Display? Keine. Wenn wir uns erfrischen, da gehen wir, es ist aus dem Bild da. Also, bis wir 7 68 getroffen haben, wollen wir, dass das Bild erscheint. Also müssen wir das Gegenteil tun. Also lassen Sie uns tun, um, hier ist tun mobile Hit in und wir werden Block drei frisch anzeigen. Und während ich es wieder alles in der Medienabfrage ist, Ähm, alles, was größer als 7 68 ist, wird diese mobile versteckte Klasse angezeigt. Alles, was kleiner ist, wird versteckt. So sehen wir es in Aktion hier unter 7 68 es verschwindet, also haben wir noch ein paar Probleme hier. Wir werden nicht klopfen auf den Boden, und wir bekommen übermäßiges Streicheln auf der Oberseite, was in Ordnung ist für Desktop, aber nicht für Handy zu finden. Hoffen wir also, lasst uns weitermachen und das reparieren. Also, wenn wir wieder hier nach oben gehen und sehen, dass unsere Marke oben, Ich nannte den Abschnitt und gab ihm eine Klasse iPhone. Wenn Sie feststellen, dasssich dieser Abschnitt wiederholen wird, dannwürde ich ihm natürlich einen semantischeren Namen geben, aber in diesem Fallist es der einzige Abschnitt. Sie feststellen, dass Wenn Sie feststellen, dasssich dieser Abschnitt wiederholen wird, dann würde ich ihm natürlich einen semantischeren Namen geben, aber in diesem Fallist es der einzige Abschnitt. würde ich ihm natürlich einen semantischeren Namen geben, aber in diesem Fall Wenn wir uns unser Design ansehen, hat es kein Streicheln auf der Oberseite und zusätzliche Polsterung auf der Tut mir leid, keine Polsterung auf der Unterseite und zusätzliche Polsterung auf der Oberseite. Deshalb habe ich es gegeben. Es ist eine eigene Klasse von iPhone. Also in meinem Stylesheet hat diese iPhone-Klasse klopfte Herbst Null, was nicht das ist, was wir für Handy wollen. Also müssen wir es verschieben, damit wir es kopieren und in die Medienabfrage einfügen, die an der 7 68 Push arbeitet , die dort drüben ist. Also die sich wiederholenden Elemente, die wir wussten, brauchen die gleiche Farbe, damit ich das wirklich entfernen kann. Das Muster unten wird Null und 1 20 in etwas über 7 68 sein. Wir möchten jedoch, dass die regulären Abschnittseigenschaften zuerst für Mobilgeräte angewendet werden, so dass wir eigentlich nur die Polsterung auf Mobilgeräten töten können. Erstens, Wenn wir aktualisieren und wir gehen zurück zu unserer mobilen Ansicht, Sie können sehen, dass je nach unten und oben mit Streicheln auf der Polsterung auf der oberen und unteren auf den anderen Abschnitten übereinstimmen . So haben Sie es, der mobile erste Ansatz wieder in Aktion. So wie Sie sehen können, wie Ihr Vertrauen wächst, werden Sie Styling oder arbeiten an Ihren Zellenblättern in einem mobilen ersten Ansatz, was bedeutet, dass alle Stile außerhalb von ihnen. Unity-Abfrage ist für Ihr mobiles Gerät gedacht und alle Stile in Ihren Medienabfragen sind für alles größere gedacht 11. Flush (Rand zu Rand): Okay, wir sind fast bis zur Ziellinie. Wenn Sie sich also die Gewinne ansehen, die hier gemacht werden, habe ich das geschaffen. Dieser einfache Abschnitt sind hier. Es ist nur eine Spalte. 12. Also, wenn Sie überprüfen Sie den Markt, die ich für den Abschnitt Oh, das Bewertungen Container Zeile eigenen PLO, die 100% mit Absatz Tag innerhalb. Und es eigentlich, ähm, ich musste nicht wirklich irgendwelche Änderungen vornehmen, weil es zuerst gut in das Handy passt. Also weiter zu diesem Abschnitt Wie Sie sehen können, habe ich dem mobilen ersten Ansatz nicht gefolgt, nur so dass ich über einen Punkt hier gehen kann. Manchmal ist es hilfreich, Ihre Stylesheets in einer Desktop-Ansicht zu erstellen, damit Sie wissen, was Sie letztendlich zu tun haben. Das einzige, was ist, dass Sie zurückgehen und Ihre Medienabfragen ändern müssen. Also, was ich hier tun will, ist im Grunde zu wollen, was? Was hier in diesen Ansichten passiert, so dass Sie sagen können, dass wir einige Hintergrundgröße für jeden Block korrigieren müssen, und wir müssen dies auch anders gestalten. Wie Sie sehen können, sieht es nicht richtig aus, also müssen wir es aufteilen. Also, wenn ich meinen Inspektor anschaue, um das Element zu inspizieren und meinen Lineal hier anzuschauen, denke ich, was ich hier tun muss, ist ah, ähm, Bruchpunkte dafür zu schaffen um, zwei verschiedene, ähm, ähm, . Großartig. Also offensichtlich werde ich es zwei voll mit Haaren unter 7 68 für 7 68 brechen, was über Tablet ist. Kennst du diese Ansicht? Ich werde nur die Größe des Textes reduzieren. Und dann, wenn ich das einmal kaputt habe, wahrscheinlich um etwa 10 herum, sind es zehn. 24. Ich würde es auf die volle Größe erhöhen. Also, das ist, was ich zuerst tun werde, ist, dass wir es den ganzen Weg runter nach Mobile hier nehmen und wieder zu meinem Stil zurückkehren können. Lassen Sie mich das hier ein wenig erweitern, wenn ich zu meinem Markup zurückgehe. Wie Sie sehen können, gab ich jedem, ähm, Block eine Klasse von Kategorie und es ist der entsprechende Hintergrund zu Italienisch Indian Französisch entspricht der Hintergrundkategorie ist spezifisch für, ähm, diese 20% Peitsche. Nein, einige. Es ist etwas ziemlich Interessantes hier. Also keine dieser Spalten ist 20% der nächste, den ich bekommen kann. Es ist ruhig, aber es ist ein 16% genannt drei bei 25%. Also weißt du, wenn ich 100% habe und ich es gleich in fünf teilen will, sind das 20%. Deshalb musste ich meine eigene, äh, spezielle A-Klasse für diesen Block erstellen äh, . Und ich nannte die Kategorie, die nach links schwebt, mit einer 20 Box Größenordnung Bestellbox. Also, was ich tun muss, ist, dass ich das tatsächlich auf den Desktop verschieben muss. Also nehme ich die Kategorie, schneide sie zuerst aus meinem Handy, ähm, Abschnitt. Also muss ich es in diese Medienabfrage von 7 68 setzen, also werde ich es einfach reinlegen, genau nach dieser hier. Ich glaube schon. Und wenn ich die Seite gut aktualisiere, also habe ich noch ein paar Dinge zu beheben, ähm, ähm, im Grunde brach ich dieses Gitter aus und steckte es auf den Desktop. Wenn ich also 7 60 a überschreite, wird es einrasten. Also haben wir einen. Wir sind fast da. Also müssen wir nur mit den aktuellen Stilen für, äh, das Handy zuerst arbeiten äh, . Also lassen Sie uns hier nach oben scrollen und Sie können sehen, dass meine Kategorien, ah,Höhe eingestellt hat ah, . Und all diese, ähm, Hintergrundbilder müssen in meine Medienabfrage gehen. Also habe ich eine 7 68 minütige Abfrage hier oben, um ihn genau unter, dass, um richtig und sehr frisch zu erfinden. Ich nehme meine Hintergrundbilder von Mobile First heraus, genau das wollte ich tun. Also jetzt, in der Kategorie der Kategorieabschnitt, den ich wieder erstellt habe, hat eine feste Höhe, die ich reduzieren möchte, ähm , die Hintergrundfarbe, ich werde das ändern. Und dann auch diesen Abschnitt nannten wir es Rezepte, die diese Klasse hier ist, Mattierung Null, Streicheln oben, unten und links, die wir ändern könnten. Lasst uns fortfahren und das ändern. Und wir werden die Höhe ändern. Wir werden die, ähm, die Ränder hier entfernen ähm, . Also lasst uns weitermachen und das tun. Es ist das erste, was ich tun möchte, ist, diese Kategorie auszuschneiden. Also, eigentlich werden wir das gerade jetzt kopieren. Legen Sie es in meine Medienabfrage für diesen Stopp. Also denken Sie daran, das ist genau, wie wir wollten und Desktops. Ich werde das jetzt hier behalten. Mobil zuerst. Ich will diese Farbe nicht, okay? Und da wir keinen Hintergrund haben, musst du dir darüber Sorgen machen, damit ich das entfernen kann? Ich möchte, dass mein Text in der Mitte steht. Ich will nicht, dass es so groß ist, also werde ich das einfach entfernen. Und an diesem Punkt sollten wir nur alle Weißen der Erfrischung bekommen. Mein Text ist weiß, also lasst uns die Textfarbe Haar ändern. Ich werde es nur in Grau ändern, damit wir sehen können, was wir gerade sind. So können Sie sehen, dass dort viel besser aussehen, wissen Sie, es ist definitiv zufrieden. Zuerst haben wir die Höhe entfernt, also geht es strikt nur von den Rändern ab. haben wir die Höhe entfernt, Also, wenn wir den Verkauf untersuchen, würde May ihn irgendwie optimieren, während wir gehen. Also hier bekommen wir Ah, Marge, oben auf dem Kategorie-Absatz-Tag, das hier von 70 Pixeln ist, und du weißt, dass das nicht so schlecht aussieht. Damit wir es so behalten können. Ähm, ich denke, das einzige Problem, auf das Sie stoßen könnten, ist das, wenn wir gehen, um eine Regel hinzuzufügen, habe ich geplant, eine Regel hinzuzufügen. Ich meine, das liegt an dir. Dies ist etwas, das Sie und der Designer durchreden würden oder wenn Sie der Designer sind, etwas, das Sie irgendwie handhaben müssen, wie Sie erstellen, ähm, wie Sie für Mitglied für Mobile zuerst entwickelt. Also eine Sache, die ich sehr vorschlagen würde, ist ja, Hinzufügen einer Grenze auf der Unterseite von diesen. Und vielleicht, weißt du, offensichtlich die Grenze hier auszuschließen. Das ist also etwas, das du didieren kannst. Ich meine, an diesem Punkt sieht es ziemlich gut aus. , Und wenn wir auf 7 68 ausbrechen,bekommen wir diese wunderbare, ähm, Magie dort mit der Medienanfrage. Also noch einmal, es ist nur eine Frage, alles aus dem Haupt-Stylesheet zu verschieben, alles in die Medien zu verschieben, es nach einem Desktop abzufragen. Also offensichtlich, was auch immer Sie hier haben, möchten Sie es nicht überschreiben oder sich innerhalb der Medienabfrage wiederholen. Genau wie in der Kategorie hier änderte sich die Kategoriefarbe, weil sie im Desktop weiß ist mit dem violetten Hintergrund, dem spezifischen, ähm, entsprechenden Hintergrund dort. Also gehen wir zum nächsten Teil, der diese erweiterte Ansicht dort ist, die nur eine Angelegenheit ist, um mit dem Akron-Bild herum zu spielen, so dass wir hier ein paar Dinge tun können . Also, wenn wir die, ähm, die Stile hier für die Kategorie überprüfen ähm, , können wir tatsächlich Hintergrundgröße einschließen. Wenn wir also Hintergrundgröße machen und es auf Abdeckung setzen, können Sie sehen, dass es dafür verkauft wird. Und alles, was tut, ist, das Hintergrundbild zu erweitern, um diesen Raum zu füllen. Also, das ist, was wir dio gehen zurück zu unserer vielleicht nicht CSS-Datei hier und innerhalb der Kategorie werden wir für diese Medienabfrage hinzufügen 7 68 und höher. Hintergrund seufzt Abdeckung. Also, wenn wir frisch sind und es erweitern, scheinen Sie, dass wir das gelöst haben. Also gehen wir hin. Das ist eine Fluidbox mit einem benutzerdefinierten Raster. Dies sind nicht Ihre Spaltenraster, die wir an eins bis 12 gearbeitet haben. Dies ist eine benutzerdefinierte Griechen. Wir brauchten 20% auf dem Weg. Wir bekommen natürlich 20%, 100 geteilt durch fünf ist 20, deshalb sind es 20%. Und das war nicht aus unserem Netz verfügbar. Es ist also eine Kategorieklasse, die wir erstellt haben, um, und geben ihr 20% mit. Sobald wir also zu einer mobilen ersten Ansicht gekommen sind, brechen wir in diesen Listenstil ein. Und offensichtlich, wenn dies Längen waren, in denen ich mein Markup ändern kann, gehen sie auf die entsprechende Seite. Also, da gehst du. Wieder einmal ist es mobil zuerst, und dann fügen Sie nichts , bis Sie etwas über diesem 7 68 Also, um anderes hinzu, bis Sie etwas über diesem 7 68 Also, umdiesen Abschnitt zu beenden, gehen Sie voran und als Herausforderung, herauszufinden, wie man dies einschließt. Das zwischen dem Bruchpunkt, das ist, ähm, die 7 60 zwischen sieben cc a. Jeder Inspektor Elemente irgendwo zwischen 7 68 und 20 und 10 24. Also geh voran, und das Und wenn wir zurückkommen, machen wir den letzten Abschnitt 12. Footer: Okay, also haben wir die Ziellinie erreicht. Also lasst uns mal nachsehen. Vor allem aus dem vorherigen Video, was war der Fix dafür zwischen Breakpoints. Also gehen Sie vom mobilen Breakpoint, der bei 7 68 endet, was genau hier für Sie ist. Wir mussten die Schriftgröße für diese Kategorie ändern, also reduzierten wir sie. Wie Sie hier sehen können, innerhalb meiner 7 68 Medienabfrage habe ich sie innerhalb meiner 7 68 Medienabfrageauf 20 Pixel reduziert. Also, sobald wir genug Platz hatten, können wir es auf das Original erhöhen, das ist genau da, das war eigentlich ein neues Medium Queria hatte, um 1200 Pixel zu erstellen, erhöhte es auf 30 Pixel auf dem Absatz. Das war also die Lösung dafür. Also, wie Sie sehen können, ging unser voran und erstellt den letzten Abschnitt diese die Statistiken in der Fußzeile. Also, wenn wir zu meinem Zeichen rüber gehen, können Sie hier nichts zu Ungewöhnliches sehen. Also habe ich einen Abschnitt, der ihm eine Klasse von Statistiken gibt, damit ich hier mit diesem Padding rumspielen kann . Es wird nicht die gleiche Polsterung wie die anderen Abschnitte und innerhalb dieses Abschnitts sein. Ich habe meinen Container, meine Reihe. Und dann musste ich wieder ein benutzerdefiniertes Raster erstellen und ich gab ihm eine Klasse von stat. Also, wenn ich zu meinem Haupt gehe, dass TSS Sie hier sehen können, tatsächlich aufgelistet es zusammen mit Kategorie, da es das gleiche verwendet, sagt es Eigenschaften mit 20% schwebenden auf der linken Seite. Und das geschieht alles auf allem, was größer ist als ein mobiles Gerät. Also, wenn wir für Sie auf das mobile Gerät gehen, können Sie sehen, dass ich es im Listenformat habe. Also, wenn Sie schauen, ist das Styling auch anders. Geben Sie ihm einen violetten Hintergrund mit weißem Text. Also, wenn wir zu meiner Medienabfrage hier oben gehen, wenn meine Stile bei sind, können Sie sehen, dass mein Handy zuerst mein Boot wird zuerst Styling. Ich wende diesen violetten Hintergrund an und die Textfarbe ist weiß. Also in meiner Medienabfrage hier, meine 7 68 können Sie sehen, dass ich es umschalten. Ich änderte den Schreiber in Schwarz, also lass mich ihn da rausziehen und sitzt die Farbe auf Schwarz. Sie ist die Farbe Hintergrundfarbe zurück zu weiß und dann für den letzten Abschnitt. Es ist sehr einfach Footer Haben Sie einen Container mit einer Zeile Haben Sie eine Klasse von links und eine Klasse von rechts, da es nur ein einfaches schwebendes Element war. Also, wenn wir mein CSS hier unten im Gitter überprüfen, tut es mir leid. Am unteren Rand meines Hauptpunkt-CSS habe ich tatsächlich links und rechts zu meiner Ansicht hinzugefügt, weil ich den Float links und rechts brauche. Aber ich habe es nicht für das Handy Sie aufgenommen, da es nur zentriert wird. So können Sie sehen, ob ich hier nach oben scrolle, um, zu meiner Fußzeile Schweigen meine mobilen Ersten Fußzeilenstile sind nur Text ausrichten Mitte. Also da hast du es. Ich werde sowohl das Markup auf den Stylesheets veröffentlichen, damit Sie Zugriff auf sie haben und die überprüfen können , aber bitte stellen Sie sicher, dass Sie einige Screenshots machen. Ich möchte den Fortschritt Ihrer Arbeit sehen. Und wenn Sie irgendwelche Fragen haben, stellen Sie sicher, sie auf der in der Frage zu posten, damit ich sie beantworten kann. Und das schließt responsive Webdesign Mobile ersten Ansatz mit bedrohlichen Bildern und Medienabfragen