So implementieren Sie die adaptive Höhe im Bootstrap

Wenn Sie mehr über Bootstrap erfahren möchten, klicken Sie auf: Bootstrap-Tutorial

Viele Leute verwenden das Raster-Layout von Boot, wissen aber nicht, wie sie die Höhe proportional steuern können. In diesem Artikel wird ausführlich beschrieben, wie das adaptive Layout der Elementhöhe beim Erstellen einer Front-End-Seite mithilfe des Bootstrap-Frameworks gesteuert wird.

Zuerst zitieren wir ein Stück JS am Kopf der Seite

Das JS-Code-Snippet lautet wie folgt:

var iScale = 1;
iScale = iScale / window.devicePixelRatio;  
document.write(&#39;<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=&#39; + iScale + &#39;,minimum-scale=&#39; + iScale + &#39;,maximum-scale=&#39; + iScale + &#39;">&#39;) 
var iWidth = document.documentElement.clientWidth;
document.getElementsByTagName(&#39;html&#39;)[0].style.fontSize = iWidth / 16 + &#39;px&#39;;

Hinweis: Es muss muss vor dem Laden des Dokuments eingeführt werden, andernfalls wird es nicht wirksam.

Nachdem die Einführung erfolgreich war, können Sie sehen, dass das Attribut „font-size“ im HTML-Element des Dokuments angezeigt wird.

Die zweite Sache ist, dass wir weniger verwenden müssen, um CSS zu schreiben. Der Hauptgrund ist, dass weniger über Berechnungsfunktionen verfügt. Informationen zur Verwendung von weniger finden Sie auf der weniger offiziellen Website.

weniger Berechnungsstil-Codeausschnitt:

@s:46.875rem;
@color:~"div[class^='col']";
@{color}{
    background: #999;
    height: 200/@s;
  }

Der obige Code bedeutet, dass die .color-Klasse mit einer Höhe von 100 Pixeln hinzugefügt wird. Dann sind natürlich 200 Pixel direkt 200 /@s; Das ist es. Der Wert der Variablen ist nicht festgelegt, sondern die dynamisch berechnete Schriftgröße. Die Größe des Werts wird basierend auf der Größe der tatsächlichen Konstruktionszeichnung berechnet.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die adaptive Höhe im Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!