Es gibt zwei Möglichkeiten, diesen Effekt zu erzielen.
Methode 1: Verwenden Sie anstelle eines festen Werts für die Elementgröße einen Prozentsatz. Dies wird jedoch nicht empfohlen, es sei denn, die Darstellung der von Ihnen entwickelten Seite ist recht einfach. Da bei der Entwicklung von CSS viele Rendering-Stile verwendet werden, werden Prozentsätze nicht unterstützt. Anders als Sie sich vielleicht vorstellen können, kann jeder Stil jedes Elements automatisch entsprechend dem Prozentsatz angepasst werden. Beispielsweise wird nur ein Div in eine Testseite geschrieben und seine Breite und Höhe werden als Prozentsätze festgelegt. Aus dem Effekt lässt sich schließen, dass die Höhe dieses Div reduziert wird, wenn keine andere Rendering-Koordination vorgenommen wird , auf der Seite kann ich dieses Div nicht sehen. Ein weiteres Beispiel ist die Größe der Inhaltsschriftart. In den meisten Fällen beträgt die Standardschriftgröße des Browsers 16 Pixel. Wenn Sie zum Konfigurieren der Schriftgröße einen Prozentsatz verwenden, bedeutet 100 %, dass die Standardgröße des Browsers verwendet wird, dies jedoch nicht der Fall ist Standardeinstellung für alle Browser. Die Schriftgröße beträgt alle 16 Pixel. Es gibt eine ganze Reihe von CSS-Stilen, die Prozentsätze wie diesen verwenden, um Probleme festzulegen. Wenn Ihre Seite also nicht einfach genug ist, verwenden Sie Prozentsätze nicht direkt.
Die zweite Methode, die auch am weitesten verbreitet ist, besteht darin, die Website responsiv zu entwickeln. Es ist zu beachten, dass die Reaktionsfähigkeit selbst viele andere Namen hat. Einige Orte werden als Streaming-Entwicklung bezeichnet, andere direkt als N-in-1. Sie müssen sich nicht darum kümmern, wie die verschiedenen Orte heißen. Sie müssen nur wissen, dass der Kern dieser Technologie, die sich an verschiedene Geräte anpasst und über steuerbare Anzeigeeffekte verfügt, die von CSS bereitgestellte Medienfähigkeit ist. Abhängig von der Breite wird erst wirksam, wenn die Breiten- und Höhenanforderungen erfüllt sind
<link rel="stylesheet" media="screen and (max-width:600px) and (max-height:400pX)"href="style.css">
Sie können Medienfunktionen auch verwenden, um verschiedene Stile in eine CSS-Stildatei zu schreiben, genau wie die Logik von if else-Tags
@media screen and (max-width: 200px) {
/* 应用样式 */
}
Angesichts der Laufgeschwindigkeit der Website wird empfohlen, beim Importieren die Bildschirmbreite und -höhe zu ermitteln