Wie passt sich die mobile HTML5-Seite an den Bildschirm an? Vier Möglichkeiten, HTML5-Seiten an Mobiltelefonbildschirme anzupassen

Der Inhalt dieses Artikels befasst sich mit der Verwendung von Hintergrund-Orgin in CSS3 (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

1. Verwenden Sie den Meta-Tag: viewport

Eine häufig verwendete Methode zur Anpassung von H5-Mobilseiten. Aber jedes Gerät interpretiert das Tag anders und unterstützt es unterschiedlich, sodass es nicht mit allen Browsern oder Systemen kompatibel ist.

Ansichtsfenster ist der sichtbare Bereich der Webseite des Benutzers. Ins Chinesische übersetzt kann es als „Sichtbereich“ bezeichnet werden.

Mobile Browser platzieren die Seite in einem virtuellen „Fenster“ (Ansichtsfenster). Normalerweise ist dieses virtuelle „Fenster“ (Ansichtsfenster) breiter als der Bildschirm, sodass nicht jede Webseite klein gequetscht werden muss In einem Fenster (was das Layout von Webseiten zerstören würde, die nicht für mobile Browser optimiert sind) können Benutzer schwenken und zoomen, um verschiedene Teile der Webseite anzuzeigen.

Viewport-Tag und seine Attribute:

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Detaillierte Einführung jedes Attributs:

属性名	取值	描述
width	正整数 或 device-width	定义视口的宽度，单位为像素
height	正整数 或 device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes/no	定义是否允许用户手动缩放页面，默认值yes

2. Verwenden Sie die CSS3-Einheit rem

rem ist eine neue relative Einheit (root em, root em) in CSS3. Wenn Sie rem zum Festlegen der Schriftgröße für ein Element verwenden, handelt es sich um eine relative Größe, jedoch nur relativ zum HTML-Stammelement. Dadurch können Sie alle Schriftgrößen proportional anpassen, indem Sie nur das Stammelement ändern, und Sie können die Kettenreaktion vermeiden, bei der die Schriftgrößen Schicht für Schicht zusammengesetzt werden.

Derzeit unterstützen alle Browser außer IE8 und früheren Versionen rem. Schreiben Sie für Browser, die dies nicht unterstützen, eine zusätzliche absolute Einheitendeklaration. Diese Browser ignorieren mit rem festgelegte Schriftgrößen. Hier ist ein Beispiel:

p {font-size:14px; font-size:.875rem;}

Die Standardschriftgröße von HTML beträgt 16 Pixel, d. h. 1rem=16px. Wenn die Breite eines p 32 Pixel beträgt, können Sie sie auf 2rem festlegen.

Um die Berechnung der Werte zu erleichtern, wird normalerweise 62,5 %, also der Standardwert von 10 Pixel, als Basis verwendet. Selbstverständlich kann diese Basis je nach Situation einen beliebigen Wert haben. Die Einstellungsmethode lautet wie folgt:

Html{font-size:62.5%(10/16*100%)}

Spezifische Regeldefinitionen auf verschiedenen Bildschirmen, dh die Art und Weise, wie die Basis definiert wird: Sie kann über CSS definiert werden, und verschiedene Basiswerte können in unterschiedlicher Breite definiert werden Bereiche. Natürlich kann es auch einmal über js definiert werden:

<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;,
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + &#39;px&#39;;//其中“20”根据你设置的html的font-size属性值做适当的变化
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener(&#39;DOMContentLoaded&#39;, recalc, false);
    })(document, window);
</script>

3. Medienabfragen sind auch eine CSS3-Methode Wir möchten dieses Problem lösen, indem wir es an den Bildschirm des Mobiltelefons anpassen.

Die Funktion der Medienabfrage besteht darin, verschiedene CSS-Stile für verschiedene Medien festzulegen. Zu den „Medien“ gehören hier die Seitengröße, die Bildschirmgröße des Geräts usw.

Zum Beispiel: Wenn das Browserfenster kleiner als 500 Pixel ist, wird der Hintergrund hellblau:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

4. Prozentangaben verwenden

Prozentangaben beziehen sich Zum übergeordneten Element sind alle Prozentsätze so. Wenn die Breite des untergeordneten Elements 50 % beträgt, beträgt die Breite des übergeordneten Elements 100 %. Die Standardbreite des Körpers ist also die Bildschirmbreite (auf dem PC bezieht sie sich auf die Browserbreite). Die untergeordneten Elemente können nach Prozentsätzen positioniert werden (oder die Größe angeben). Dies ist nur für Seiten mit einfachem Layout geeignet und es ist schwierig, komplexe Seiten zu implementieren.

Empfohlene verwandte Artikel:

So passen Sie HTML-Webseiten automatisch an Mobiltelefonbildschirme an_html/css_WEB-ITnose

html5 in Entwicklung befindliches Ansichtsfenster zur Bildschirmanpassung

Das obige ist der detaillierte Inhalt vonWie passt sich die mobile HTML5-Seite an den Bildschirm an? Vier Möglichkeiten, HTML5-Seiten an Mobiltelefonbildschirme anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!