4 Anpassungsmethoden für mobile Endgeräte

1. @media screen realisiert adaptives Weblayout

Vorteile: Es sind keine Plug-Ins erforderlich und es kann sich an verschiedene Fenstergrößen anpassen , einfach in CSS das @media-Bildschirmattribut hinzufügen.

Offizielle Dokumentation: @media kann verschiedene Stile für verschiedene Bildschirmgrößen festlegen. Insbesondere wenn Sie eine responsive Seite einrichten müssen, ist @media sehr nützlich.

Syntax: @media mediatype and|not|only (media feature) { CSS-Code;

2.rem-Anpassung

Diese Methode ist ein Originalartikel des CSDN-Bloggers „sxs1995“, blog.csdn.net/sxs1995/art…

Die Berechnungseinheit ist 640px = 6,40rem,

Wenn die Breite des Designentwurfs 750px beträgt, ist i = 750; Wenn die Breite des Designentwurfs 640px beträgt, ist i = 640.

Nachteile: Beim ersten Laden der Seite blinkt die Zeile 1-2 Sekunden lang und das Benutzererlebnis bei der Vorschau auf Mobiltelefonen ist nicht gut

/* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */
h5{
    color: black;
  }
@media screen and (max-width: 1200px){
  h5{
    color: #eee;
  }
}
/* h5字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */
@media screen and (min-width: 869px) and (max-width: 900px){
  h5{
    color: red;
  }
}
/* 屏幕宽度小于 320px 则 h5 的字体大小是20px */
@media only screen and (max-width: 320px){
  h5{
    font-size: 20px;
  }
}

3. Verwenden Sie @media, um die REM-Anpassung zu implementieren

Vorteile: Wenn sich die Bildschirmbreite ändert, müssen Sie zur Anpassung nur die Schriftgröße im HTML-Element ändern

!function(n){
  var  e=n.document,
  t=e.documentElement,
  i=720,
  d=i/100,
  o="orientationchange"in n?"orientationchange":"resize",
  a=function(){
    var n=t.clientWidth||320;n>720&&(n=720);
    t.style.fontSize=n/d+"px"
 };
  e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

4. Verwenden Sie vw, um das rem-adaptive Layout anzupassen

Ich habe den Artikel des Autors JowayYoung über die flexible Nutzung von CSS-Entwicklungsfähigkeiten auf Nuggets gesehen vw zum Anpassen des adaptiven rem-Layouts

Vorteile: Die Verwendung des rem-Layouts auf dem mobilen Endgerät erfordert das Festlegen der Schriftgröße verschiedener Bildschirmseitenverhältnisse über JS. Die Kombination von vw-Einheiten und calc() kann sich der Kontrolle von JS entziehen

/* 不同屏幕宽度，设置不同的font-size */
@media screen and (width:750px){html{font-size:100px}}
@media screen and (width:749px){html{font-size:99.87px}}
@media screen and (width:748px){html{font-size:99.73px}}
...
@media screen and (width:321px){html{font-size:42.8px}}
@media screen and (width:320px){html{font-size:42.67px}}

Derzeit habe ich alle oben genannten Methoden verwendet. In Anbetracht der Menge an Code verwende ich hauptsächlich vw, um das rem-adaptive Layout anzupassen. Haben Sie weitere bessere Vorschläge? Ich werde es sorgfältig lesen, danke.

Empfohlenes Tutorial: „

CSS-Tutorial

“

Das obige ist der detaillierte Inhalt von4 Anpassungsmethoden für mobile Endgeräte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!