Implementierung, die sich an Geräte unterschiedlicher Größe anpasst

Manchmal besteht die Notwendigkeit, dass der Inhalt genau einen Bildschirm einnimmt und an Geräte unterschiedlicher Größe angepasst wird. Lassen Sie uns nicht darüber sprechen, dass dies auf manchen Geräten zu einer unbefriedigenden Anzeige führen wird, sondern sprechen wir direkt darüber, wie man es umsetzt.

Das erste, was uns vielleicht einfällt, ist, dass die Breiten-, Höhen- und Randwerte (margin, padding) aller Elemente auf Blockebene auf dem Seite sind alle in Prozent angegeben.
Wenn es sich um einen Prozentwert in horizontaler Richtung, Breite und horizontalem Abstand handelt, wird sein Wert relativ zur Breite des übergeordneten Elements berechnet, das in horizontaler Richtung an Geräte unterschiedlicher Größe angepasst werden kann.
Wenn der Höhenwert in vertikaler Richtung ein Prozentsatz ist, wird sein Wert relativ zur Höhe des übergeordneten Elements berechnet. Wenn der Wert des vertikalen Abstands jedoch ein Prozentsatz ist, wird sein Wert relativ zur Breite (nicht zur Höhe) des übergeordneten Elements berechnet, haha ​​(hilflos ~~~).

Daher können wir zur Anpassung die prozentuale Lösung in horizontaler Richtung verwenden. Die vertikale Ausrichtung erfordert andere Lösungen.

Können wir CSS3-Medienabfragen verwenden? Das geht nicht. Obwohl Media Queries Abfragen für Gerätehöhen unterstützt, ist es für uns unmöglich, die Höhen aller Geräte aufzuzählen und für jedes Gerät einen Satz CSS mit unterschiedlichen Höhen zu schreiben. Wenn Sie nur mit wenigen Höhengeräten kompatibel sein müssen, können Sie diese Lösung in Betracht ziehen.

Hier sind einige Lösungen.

Verwenden Sie JS, um

zu implementieren. Das Prinzip besteht darin, die Höhe des Elements mithilfe des data-style-height attribute Sein Wert ist der Bruchteil der Höhe des übergeordneten Elements. Wenn die Seite initialisiert wird, weist JS der Höhe des Elements einen Wert zu, der auf diesem Wert, der Höhe des übergeordneten Elements und der Gesamtzahl der Höhen des übergeordneten Elements basiert. Beispiel:

<p>
  <p id="a" data-style-height="1"></p>
  <p id="b" data-style-height="2"></p>
</p>

Im obigen Code beträgt die Gesamtzahl der Teile der Höhe des übergeordneten Elements 3, die Höhe von a nimmt 1 Teil ein und die Höhe von b nimmt 2 Teile ein. Angenommen, die Höhe des übergeordneten Elements beträgt 100 Pixel, dann ist die Höhe von a

und die Höhe von b ist (1 / 3 * 100)px. (2 / 3 * 100)px

Verwenden Sie auf ähnliche Weise diese Attribute, um den Abstand festzulegen: data-style-

margin-top, data-style-margin-bottom, data-style- padding-top, data-style-padding-bottom. Wenn die Seite initialisiert wird, weist JS dem Element basierend auf dem Attributwert den entsprechenden Abstand zu.

Den spezifischen Implementierungscode finden Sie hier.

Das Prinzip der Verwendung von Flex zur Implementierung von

ist im Grunde das gleiche wie bei der Verwendung von JS. Die Implementierung mit Flex verwendet einfach die Funktion, dass Flex-Elemente mit

-Werten größer als 0 automatisch größer werden, wenn der übergeordnete Raum groß ist, anstelle von JS-Berechnungen. flex-grow

Das spezifische Prinzip besteht darin, die Höhe des Elements mithilfe des Attributs data-style-height festzulegen und den Stil seines übergeordneten Elements festzulegen <a href="http://www.php.%20cn/wiki/927%20.html" target="_blank">display<p>:flex;flex-<a href="http://www.php.cn/wiki/873.html" target="_blank"> Richtung<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:flex;flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>: column;: Spalte;

. Wenn die Seite initialisiert wird, setzt JS flex-grow:属性值 basierend auf diesem Wert auf das Element. Der Abstand wird mithilfe von Elementen mit dem Attribut data-style-height und leerem Inhalt implementiert.

Den spezifischen Implementierungscode finden Sie hier.

Verwenden Sie Bilder zur Implementierung

Wenn der Inhalt keine Interaktion erfordert, können Sie die gesamte Seite in ein Bild umwandeln. Natürlich wird die Nachwartung etwas schwierig, wenn Sie dies tun.

HTML:

<img class="fullpage" src="...">

CSS:

html,body{
  height: 100%;
}
.fullpage{
  width: 100%;
  height: 100%;
}

---

Das obige ist der detaillierte Inhalt vonImplementierung, die sich an Geräte unterschiedlicher Größe anpasst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!