dies lesen, und es könnte
helfen, wenn ich es eine Marge von -1 em geben, es wird breiter. Kann hier reingehen und den Wert wieder ändern, null, -1 em, null, -1 em. Das Problem ist, ich muss den genauen Wert finden, denn wenn ich das -2 em, plötzlich, bekomme ich eine Bildlaufleiste auf der Unterseite, und ich darf nach links und rechts scrollen, weil jetzt der Container ist größer als das Ansichtsfenster. Das wird einfach nicht funktionieren. Jetzt sind Sie sicher, dass Sie an diesem Punkt denken: "Nun, das ist nicht so schwer.
" Alles, was Sie tun müssen, ist auf die Haupt, die den Rand hat, "und hier sehen Sie den Rand ist 1.4 ems, "und dann nur 1.4 em auf den Eintrag meta anwenden."Das Problem ist, das wird nicht funktionieren. Sie sehen, wenn ich gehe und -1.4 ems hier sage, sieht es so aus, als ob es den ganzen Weg überspannt, aber wenn Sie genau hinsehen, können Sie sehen, dass hier eine leichte weiße Linie ist Die linke und die rechte Seite Das liegt daran, dass obwohl der Rand 1.4 em auf der Hauptseite ist, es 1.4 in der Entry-Meta ist, weil wir em Größen verwenden, um den Inhalt zu bemessen, und Sie bemerken, dass der Eintrag meta hat eine Schriftgröße von 95%
Das bedeutet, um die Größe em zu bekommen, muss ich den Unterschied zwischen dem inneren Behälter und dem äußeren Behälter herausfinden, also lassen Sie mich eine Seitenleiste nehmen und Ihnen erklären, wie em-Größen sein können Wir brauchen zwei Elemente, bevor wir das machen können. Zuerst gehe ich zu main und finde heraus, wie groß die Schriftgröße ist. Siehe unten, Schriftgröße 14.4 Pixel. Denken Sie daran. Dann gehen wir zum Eintrag meta und mach das gleiche, was ist die Schriftgröße? Re? 13.68 So haben wir 14,4 und 13,68.
Jetzt für die Sidebar, wie em Werte zu berechnen. Wir haben zwei Behälter. Der übergeordnete Container hat eine Schriftgröße von 1 Em und die berechnete Schriftgröße im Browser beträgt 14,4 Pixel. Der geschachtelte Container hat eine Schriftgröße von 95% und die berechnete Schriftgröße beträgt hier 13,68. 13.68 ist 95% von 14.4. Der übergeordnete Container hat einen Rand von 1,4 ems und im Browser entspricht das 25,902 Pixel.
Jetzt muss ich herausfinden, welchen Wert em kann ich in den verschachtelten Container setzen, um die gleichen 25,902 Pixel zu bekommen. Um das zu tun, werde ich zwei Formeln verwenden. Zuerst nehme ich die übergeordnete Schriftgröße und teile sie durch die verschachtelte Schriftgröße. Dies gibt mir den relativen Unterschied zwischen den beiden. Wenn Sie diese Mathematik machen, werden Sie wahrscheinlich eine wirklich seltsame Zahl, wie 1.052631 da da da da, haben. Jetzt müssen wir diese Nummer speichern und fügen sie in eine neue Formel, die die übergeordnete Größe nimmt, so in unserem Fall, 1,4, und mal mit dem relativen Unterschied, dass 1,05
Dies gibt uns die verschachtelte Größe em auf die wir zielen müssen. In unserem Beispiel ergibt das Ergebnis all dieser Berechnungen 1.47368421052632, und das ist der Wert, den wir verwenden werden. Zwischen dem vorherigen Film habe ich ein paar kleine Änderungen an unserem CSS vorgenommen. Wenn Sie jetzt an diesem Punkt weitermachen möchten, müssen Sie sich die Übungsdateien für 06-05 besorgen. In style.css sehen Sie, dass ich hier unter der Metaregel für Einträge zwei neue Eigenschaften erstellt habe.
Zuerst habe ich den Randwert, der oben und unten auf Null und links und rechts auf -1.47368 Da da da setzt. Das ist die Nummer, die wir gerade bekommen haben. Dann habe ich das Gleiche im Padding gemacht und der Box einen Padding mit dem gleichen Wert gegeben. Das bedeutet, dass wenn der Inhalt in dieser Box genug nach links oder rechts reicht, er nicht versehentlich die Kanten des Ansichtsfensters berührt. Wie Sie im Browser sehen können, erstreckt sich unser Inhalt nun durch Hinzufügen dieser beiden Eigenschaften über die gesamte Breite des Ansichtsfensters. Wenn Sie jedoch jetzt beginnen, das Ansichtsfenster zu vergrößern, werden Sie feststellen, dass Sie irgendwann einen Unterbrechungspunkt erreichen.
Und ich habe diesen Breakpoint bereits hier berücksichtigt. Wir haben einen Breakpoint bei 30 ems, und hier muss ich diesen Margin-Wert ändern, da an diesem Breakpoint der Rand um den Inhalt von 1,4 auf 1,8 wechselt. Als Ergebnis erhalten wir jetzt -1,8947 und so weiter. Das löst also die kleineren Bildschirme. Aber was ist mit diesem großen Bildschirm, auf dem der Inhalt in der Mitte schwebt? Nun, hier müssen wir etwas völlig anderes machen, und deshalb habe ich diesen Abschnitt auskommentiert, damit ich erklären kann, was vor sich geht.
Ich nehme die Kommentare weg, und dann schauen wir uns diese Medienabfrage an. Wenn der Bildschirm breiter als 57 ems ist, sperren wir die Breite des Hauptinhalts und schweben ihn in der Mitte. Um das Entry-Meta auf die volle Breite zu bringen, müssen wir nun herausfinden, wie breit das tatsächliche Viewport ist, und dann das Entry-Meta entsprechend positionieren. Und was ich hier gemacht habe, ist eine neue Maßeinheit in CSS3 namens vw oder viewport width. Also habe ich es wie folgt eingerichtet. Wenn der Browser die vw-Einheit unterstützt, ist die Breite des Eingabe-Metas so breit wie das Ansichtsfenster.
Dann muss ich die Breite unseres Inhalts subtrahieren, also 52,2 ems von der Breite des Darstellungsbereichs, aber ich muss das rückwärts tun, wegen Mathe. Also hier haben wir -100 Ansichtsfenster Breite plus 52.2. Das gibt uns die gesamte Darstellungsbreite minus den Hauptinhalt. Und dann teile ich das durch zwei und verschiebe den Inhalt um diesen Wert nach links. Das Endergebnis davon sehen Sie, wenn ich die Seite neu lade. Jetzt erstreckt sich der Inhalt über die gesamte Breite, aber ich weiß, dass du sagen wirst: "Aber ich sehe hier auf der Seite Weiß." Das liegt an der Vorschau dieser mobilen Ansicht.
Wenn ich die Browser-Tools schließe, sieht man, dass sie sich tatsächlich über die gesamte Breite erstreckt. Diese Mathematik ist jedoch nicht exakt, deshalb kann ich jetzt leicht nach links scrollen. Und das ist eine unglückliche Realität, denn wenn Sie die vw-Eigenschaft verwenden, wird hier die Breite des Darstellungsbereichs einschließlich der Bildlaufleiste auf der rechten Seite berechnet. Und jetzt schwebt die Bildlaufleiste über dem Inhalt, was bedeutet, dass mein Inhalt breiter ist als das, was du siehst. Das unterscheidet zwischen den Browsern, und deshalb können wir nicht für die Bildlaufleiste berechnen, also werde ich schummeln, um das zu beheben.
Die Art und Weise, wie wir hier betrügen ist, indem Sie den Inhaltsbereich, also den gesamten Bereich, und Spruch für den Inhaltsbereich, ich werde das Überlauf-X, das ist der horizontale Überlauf blockieren, und setzen Sie es einfach auf versteckt. Auf diese Weise wird der Überlauf, der wegen dieser Box passiert, einfach versteckt und du kannst ihn nicht sehen. Dank einer CSS-Alchemie haben wir jetzt einen Meta-Content-Bereich, der unabhängig von der Bildschirmgröße einen vollen Hintergrund hat.
haben Sie ber Eigenschaft von CSS versucht, und dann können Sie einen Teil vom 100vh subtrahieren und Sie können möglicherweise die Scroll-Effekt entfernen –
Ja, ich habe etwas wie 'border-width: calc (100vw - 17px)' gemacht, aber das funktioniert nur für Chrome auf dem Desktop. Wenn ich es dann in einem Browser mit Scroll-Balken mit einer anderen Dimension oder in einem mobilen Browser sehe, werden die Dinge nach links verschoben :( – StephenKelzer