So implementieren Sie adaptives CSS

In CSS können Sie die Funktion calc() verwenden, um eine Anpassung zu erreichen. Sie müssen nur „Element:calc(100%-Pixelgröße);“ hinzufügen. Die Funktion calc() ist eine neue Funktion von CSS3. Sie verwendet Berechnungen, um die Länge des Elements anzugeben, sodass Sie sich keine Gedanken über die Probleme machen müssen, die durch das Hinzufügen von Rändern oder Rändern entstehen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Mit dem Aufkommen des adaptiven Layouts stoßen wir beim Erstellen von Seiten häufig auf Situationen, in denen die Breite der Elemente 100 % beträgt. Freunde, die das Box-Modell verstehen, können sich leicht vorstellen, dass die Gesamtbreite des Elements zu diesem Zeitpunkt größer als die Breite des übergeordneten Elements ist, wenn dieses Element über Rand, Polsterung und Rand verfügt, was zu einer Reihe von Layoutproblemen führt wie z. B. eine ungeordnete Seitenstruktur. Um dieses Problem zu lösen, kann ich calc() verwenden.

Was ist calc()

Erstens ist calc die Abkürzung für „calcute“ und zweitens sieht es aus wie eine Funktion. Es handelt sich um eine neue Funktion von CSS3, die zur Angabe der Länge von Elementen verwendet wird durch Berechnung Sie müssen sich also keine Gedanken über das Hinzufügen von Rändern oder Rändern machen.

Wie verwende ich calc()

Da calc() die Länge von Elementen durch Berechnung festlegen kann, wie implementiert man es?

Wir wissen, dass die Höhe und Breite von Elementen durch Einheiten wie Prozent, px usw. definiert werden kann und calc() die Höhe und Breite berechnen kann. Wie folgt:

width: calc(100% - 10px);

• Sie können die Operatoren „+“, „-“, „*“, „/“ für Berechnungen verwenden.

• Sie können eine Mischung aus Prozent, em, px, rem und anderen Einheiten verwenden für Berechnungen

• Achten Sie auf die Verwendung von Leerzeichen vor und nach dem Operator

calc()-Beispiel

Ist die obige Verwendung sehr einfach? Schauen wir uns ein vollständiges Beispiel an:
Hinweis: Das folgende Beispiel Zeigt nur die Verwendung und Wirkung von Calc an. Das eigentliche Projekt basiert auf den Anforderungen. Finden Sie den besten Weg, dies zu erreichen.

HTML-Code-Snippet

<div class="warpper">
    <div class="box1"></div>
    <hr>
    <div class="box2"></div>
</div>

css-Code-Snippet

.warpper {
    width: 200px;
    margin: 0 auto;
    padding: 15px 0;
    background-color: #f00;
}
.box1,
.box2 {
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding: 10px;
    border: 5px solid #000;
    background-color: #ff0;
}
.box1 {
    width: 100%;
}
.box2 {
    width: calc(100% - (10px + 5px) * 2);
}

Aus dem obigen Beispiel ist nicht schwer zu erkennen, dass der Unterschied zwischen Box1 und Box2 in der Definition der Breite liegt die horizontale Breite von Polsterung und Rand. Nach dem Entfernen des Werts ist die von calc() berechnete Breite der gewünschte Wert.

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie adaptives CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!