Alles klar, also schauen wir uns die Homepage an
oder reaktionsschnell.
Und in den meisten Teilen
ist es eigentlich nicht so schlimm.
Dies ist für die Tablet-Ansicht.
Offensichtlich können wir die Überschrift ein bisschen kleiner machen.
Machen Sie die Banane auch etwas kürzer in der Höhe.
Genau hier.
Natürlich können wir dem Ball etwas Polsterung zum Reise-Abschnitt hinzufügen
und lehrbar sein, um auch
den Abschnitt am besten fortzusetzen.
Aber ich denke, das ist alles, was wir tun müssen, weil
der Rest tatsächlich ziemlich gut ist.
Die einzigartige Kanaldesign-Abteilung sieht gut aus.
Die Galerie ist in Ordnung.
Besuche, unser Blog-Bereich ist in Ordnung.
Es packt keine Bewertungen, alles in Ordnung.
Für die mobile Ansicht,
die wir hier angekommen sind, müssen wir den Text natürlich
viel, viel, viel kleiner machen
, wie Sie sehen können.
Fügen Sie auch hier auch Polsterung für den Reisebereich hinzu.
Und wir müssen etwas dagegen tun , dass
wir
die beiden Bilder für
den zweiten Abschnitt nebeneinander stehen
, idealerweise sein sollten,
ich werde gerne reisen.
Dann dieses Bild und dann unsere Kinder,
die besten Orte und dann das Bild dieses Berges.
Also müssen wir auch etwas dagegen unternehmen.
Abgesehen davon sieht der Rest
der Seite ziemlich gut aus.
Die Galerie ist jetzt eine einzige Reihe, was in Ordnung ist.
Der Blog-Bereich ist ebenfalls eine einzige Zeile.
Ich will 22 Reihen, tut mir leid.
Dann packt es jetzt nicht alle Bewertungen und
die eigene separate Spalte und produziert dann auch, wie
Sie sehen können, das bei.
Alles. Richtig, also lasst uns
weitermachen und anfangen, die Änderungen vorzunehmen.
Also lasst uns mit Elementor bearbeiten.
Wir werden zuerst mit dem Banner umgehen, denn das ist
das Wichtigste Das ist das Hauptproblem.
In Ordnung. Responsive Tablets.
Was haben wir hier?
Wir werden jetzt weitermachen und den Text bearbeiten.
Und der Text war ungefähr 120 Pixel.
Wie du siehst.
Wir werden zwei große Zusammenbruch haben,
nur ein bisschen viel kleiner.
Sagen wir also 88 Pixel breit.
Aber vergessen Sie nicht, dass wir eine Höhe für den Abschnitt festgelegt haben.
Gehen wir jetzt zu diesem Abschnitt.
Wir haben hier die Mindesthöhe.
Wir werden das so weit wie möglich reduzieren.
Sie sich keine Sorgen darüber, dass der Text vorerst die Kopfzeile überlappt
.
Aber versuchen wir, Ihnen eine angemessene
Höhe für den Tisch zu geben.
Und ich denke 519, mein Baby,
zu klein, sagen wir siebenhundert.
Siebenhundert scheinen in Ordnung genug zu sein.
Vergessen Sie dann von hier aus nicht, dass wir
ihm auch negative Margen geben.
Jetzt, da wir die Größe von einhundert, zehnhundert auf 700 Frauen reduziert haben
, gehen auch
hier zur Advanced Einladung.
Lassen Sie sich nicht von der Tatsache täuschen, dass Sie in den Randboxen nichts sehen
.
Es erbt tatsächlich die Ränder
von der Desktop-Ansicht.
Also lasst uns jetzt weitermachen und versuchen, dies zu reduzieren.
Oh tut mir leid, ich hab vergessen, die Verbindung aufzuheben.
Lass uns diese 10 machen.
Alles klar. Ich gehe wieder nach oben.
Es sollte darum gehen, lass mich einfach 150 minus geben
, okay, das kann ich nicht tun.
Lass mich das einfach versuchen.
Minus 150.
Okay? Ich denke, das ist ein bisschen zu viel.
Lass uns runter gehen.
Okay, also sollte es
etwa 123 Freizeitlautsprecher
eins fünfundzwanzig, fünfundzwanzig Pixel sein.
Für den Text selbst oder die Kopfzeile
könnten wir das wieder ein bisschen kleiner machen.
Und das war's.
Was denkst du?
Ich denke, das ist in Ordnung. 80 Pixel für den Header.
Reduzieren Sie die Höhe dieses Abschnitts auf 700 Pixel,
wodurch auch die negative Marge reduziert wird.
Und ich denke, das ist in Ordnung, obwohl seien Sie vorsichtig,
sehen Sie jetzt, dass, wenn wir die Tabelle auf die maximale Bildschirmgröße erweitern
, sehen können,
dass jetzt der Leerraum angezeigt wird.
Das sollte uns jetzt sagen
, dass alles in Ordnung ist, halt eine Sekunde.
Wir müssen die negativen Vorstellungen erhöhen,
eigentlich ist das eine andere Sache, die Sie wohlhabend sein sollten.
Wenn Sie
negative Ränder und den Responsive-Modus anwenden,
stellen Sie sicher, dass Sie negative Ränder
auf die größtmögliche Bildschirmgröße anwenden.
Dies ist die größte Prägnanz wie möglich für
die geneigte Ansicht bei 1024 um 878,
wir werden die negative Marge erhöhen
oder vielmehr in diesem Fall reduzieren.
Denn wenn du negativ bist, reduzieren wir
das. Es ist alles 158.
Genau das ist es, also wenn wir das jetzt
auf die kleinste Größe für das Tablet reduzieren,
werden wir immer noch keinen Leerraum sehen.
Und das war's.
Okay, ich denke, das ist in Ordnung für das Tablet.
Nehmen wir nun einige Änderungen am
ersten oder zweiten Abschnitt vor.
Und das gibt jetzt, was müssen wir tun?
Für die Tablets? Wir können etwas Polsterung hinzufügen.
Okay, wir gehen hier rein und es ist ein Abschnitt.
Lass uns zu Advanced gehen.
Und genau hier fügen wir einfach etwas Polsterung hinzu.
Wir können zu den üblichen 25 Pixel und
dann auch zu Effektpixeln für den Boden wechseln.
Lass uns hier unten abkühlen.
Wir machen genau das Gleiche auch hier drin.
Ich zeige dir was wirklich Cooles.
25 Pixel von oben und
dann 25 Pixel von unten.
Wenn du dir das ansiehst,
wirst du erkennen, dass es eigentlich nicht so gut aussieht.
Ich meine, du hast ein Bild genau hier Ball,
die Texte, die Textsspalte ist ein bisschen zu groß.
Es ist ein bisschen zu groß.
Awesome gehört auch zum zweiten Abschnitt.
Was genau können wir also tun?
Das einfachste, was wir tun könnten, wäre, dass jede Spalte einfach
eine Breite von 100% hat.
Anstatt also zwei Spalten zu haben, müssen sie
Seite an Seite kommen.
Wir haben zwei Spalten übereinander.
Wenn ich also diese erste Kolumne hier drin gebe,
also diese erste Kolumne hier
geben wir diese nur ein oder
einhunderteinhundert.
Und dann geben wir diese Kolumne und auch 100.
Und da ist es.
Im Moment, selbst wenn wir auf einem Tablet auf die größtmögliche Größe expandieren
, denke ich,
dass es in Ordnung aussieht.
Das sieht bei einem Tipp gut aus,
aber stellen Sie sicher, dass die Bilder groß genug sind.
Eine Änderung müsste nur genau
hier sein, um
dieser Schaltfläche „ Weitere Informationen“ etwas aufzufüllen.
Ich klicke dort hinein, gehe zum
erweiterten Muster und die Buddhisten fügen unten hinzu.
Wir fügen hier etwas Polsterung hinzu.
Lassen Sie mich sagen, 25 Pixel könnten ein bisschen zu viel sein.
In diesem Fall vielleicht 15 Pixel.
15 Pixel sind in Ordnung.
Und da ist es.
Okay, lasst uns auch hier genau das gleiche Themensymptom machen.
Ich klicke hier auf diese Kolumne.
Der goto, die Spaltenbreite.
Ich gebe ihm eine 100.
Und dann auch die zweite Spalte hier drin, 100.
Okay, und dann sieh dir das an.
Idealerweise möchten wir diese Spalte direkt
oben in dieser Spalte haben.
Wie machen wir das?
Nun, wir werden einfach zu diesem Abschnitt gehen, diese beiden Spalten halten,
diese beiden Spalten halten
zum Abschnitt gehen und hier zu Advanced gehen.
Irgendwelche genau hier auf der Responsive.
Diese Option wird angezeigt, um die Spalten umzukehren.
machen wir auf dem Tablet.
Wir werden das machen und auch mobil.
Jetzt können Sie sehen, dass sich das Kind,
die beste gegens-Säule, jetzt auf dem Berg befindet.
Und genau so geht das.
Ich mache einfach weiter und füge dem Vermieter Button hier drin etwas Polsterung hinzu
.
Polsterung unten, 2515 Pixel.
Ich glaube, es war ein M & A ist okay,
also lass uns wieder an die Spitze gehen.
Scrolle nach unten.
K.
Wir haben viele Räume.
Alles in Ordnung.
Okay, sieht gut aus, sieht gut aus.
Versuchen wir nun, die Größe auf die kleinste zu reduzieren
und zu sehen, ob wir hier etwas
tun müssen. Sieht in Ordnung aus.
Sieht vollkommen gut aus.
Und da ist es. Okay.
Das war's für die Tablet-Ansicht.
Was ist mit der mobilen Ansicht?
Wechseln wir zum Handy.
Okay, also offensichtlich müssen wir die Banane hier drin
reparieren.
Nun, ich scrolle einfach schnell hier rein und
sehe den Rest der Seite.
Der Rest der Seite sieht eigentlich ziemlich gut aus.
Ja, das sieht gut aus.
Alles befindet sich jetzt in einer einzigen Spalte , in
der wir in einer Spalte und dann auf der Kontaktseite verwendet haben
.
Alles, was wir jetzt tun müssen, wäre,
mit dem Banner umzugehen.
Also lass uns das machen. Ich scrolle hier hoch.
Gehen wir zur Rubrik.
Alles klar, das erste, was wir jetzt tun werden
ist für die Höhen.
Es ist eine Mindesthöhe von 700 Pixel.
Dies wird natürlich von der Tablet-Ansicht geerbt .
Mal sehen, ob wir die Größe vielleicht ein wenig vergrößern können
.
Eigentlich.
Ich denke 879, Versuchen wir etwas zu bekommen,
sogar wie 870 Pixel vielleicht.
Versuchen wir, die Größe ein wenig auf die größte Größe für die mobile Ansicht zu erhöhen
.
Jetzt würden Sie feststellen, dass es
ein bisschen zu viel negativer Rand
da Sie die blaue Linie sehen können und Sie
sehen können, dass das Logo oben angezeigt wird.
Was wir jetzt tun müssen, ist zu
Advanced zu gehen.
Und dann versuchen wir für die negativen Margen,
dass wir es tatsächlich
nicht in irgendwelchen negativen Margen brauchen.
Eigentlich wollte es 0 schaffen.
Ja, machen wir es einfach 0, da wir
sowieso einen Blackout-Hintergrund haben.
Was bedeutet McDonald's 0?
Das ist für Mobilgeräte.
Okay, also lasst uns von hier aus
die Höhen reduzieren.
Wir werden jetzt die Höhe von der Seite des Banners reduzieren
, eher etwas Vernünftiges.
Mal sehen. Ich glaube 535. Was ist mit 530?
Ich denke, das ist in Ordnung.
Fünf-Drittel-Hügel sieht gut aus. Scrolle nach unten.
Okay. Ja.
Ich glaube, es würde dir gut gehen. Das macht sehr klein.
Und siehst du.
Okay, also können die Texte werden,
ist eigentlich ein bisschen zu groß.
Also lass uns das machen. Ich gehe
zurück, um die Überschrift Epigraphie zu bearbeiten.
Wir werden versuchen, das
so klein wie möglich zu machen.
Und wenn wir jetzt die größte für die mobile Ansicht erweitern,
haben Sie hier, okay,
das bringt uns zu einer neuen Diskussion.
Silicon ist genau hier auf der größten Größe für Mobilgeräte,
das Texas, es wäre zu klein.
Wenn wir versuchen, die Größe hier zu erhöhen,
sieht es auf der höchstmöglichen Bildschirmgröße für das Handy gut aus
.
Das Problem, das ich weiß, ist, dass wenn wir die Bildschirmgröße so reduzieren
dass die kleinstmögliche Größe für Mobilgeräte ist , da der Text jetzt etwas zu groß ist,
die kleinstmögliche Größe für Mobilgeräte ist ,
was Sie in diesem Szenario tun können, den Stil zu wechseln
Größeneinheit von Pixeln
bis zum bewerteten Viewport überprüfen Sie den VW oder die Option hier,
der VW ist die Breite des Darstellungsfensters.
Was wir versuchen werden, ist zu versuchen, die Größe des Textes basierend auf der Breite der Bildschirmgröße anzupassen
.
Also sieh dir das an.
Ich wechsle jetzt zu VW.
Und lasst uns versuchen, mit einer Größe von zehn zu gehen.
Für den Höchsten.
Dies ist die höchste Größe,
Bildschirmgröße für Mobilgeräte.
Und wenn wir dann die Größe auf die kleinste reduzieren,
können Sie sehen, dass der Text tatsächlich auch reduziert wird.
Da reduzieren wir die Größe des Bildschirms.
Das ist ein Tipp, den ich dir jetzt geben kann
Wechseln Sie einfach zu VW im Gegensatz
zu Pixeln oder K. Also vielleicht vielleicht eine Kleinigkeit,
die wir tun könnten.
Eine letzte Sache, die wir noch einmal tun könnten
die Höhe etwas weiter zu reduzieren.
Sagen wir 450 Pixel.
Das sollte die letzte Änderung sein.
Versuchen wir, diesen zu verkleinern.
Und da gehst du.
Okay, ich denke das ist, das ist in Ordnung.
Das ist an dieser Stelle in Ordnung.
Alles klar.
Da gehst du.
Scrollen wir einfach nach unten und sehen,
was wir sonst noch tun können.
Das ist so ziemlich genau das.
Ich glaube, es geht uns gut.
Lass mich das einfach ganz klein machen.
Beweise, eine Spalte.
Und da ist es,
okay, eine letzte Sache,
wir tun könnten, ist
vielleicht die Größe des Knopfes hier nur ein bisschen zu reduzieren
.
Also lasst uns weitermachen und unten rechts hier bearbeiten
, wir werden zum Stil gehen.
Eigentlich werde ich zum Style gehen.
Dann lassen Sie uns für die Typografie genau hier
schnell in ihrer Größenmischung eingehen.
Natürlich ist das auf Mobil eingestellt,
und dann machen wir einfach weiter und machen es vielleicht.
Mal sehen.
Fehler und Pixel, vielleicht 14 Pixel,
oder was können wir sonst noch ändern?
Natürlich können wir auch den Grenzradius ändern.
Lassen Sie uns dieses auf
fünf Pixel reduzieren.
Und da ist es.
Okay, jetzt könnten wir versuchen , die Größe zu klein zu machen.
Habe das eigentlich nicht getestet.
Ich bin mir nicht sicher, ob sich dies auf die Tablet-Ansicht auswirken würde.
Wird sich auf die Tablet-Ansicht auswirken und
selbst die Desktop-Ansicht wird immer klein sein.
Das liegt an der Sache, dass Sie sich entscheiden könnten, den Knopf einfach zu machen,
klein zu machen.
Alle drei sind Bildschirmgrößen.
Oder du könntest einfach mit einem Medium gehen.
Ich denke, Medium wird für Mobilgeräte gut sein.
Alles klar.
Das war's.
Ich werde jetzt weitermachen Updates.
Und da ist es.
Wir haben unsere Homepage erfolgreich in einer Responsive aufgebaut
.
Danke fürs Zuschauen und natürlich sehen wir
uns in der nächsten Klasse.