Mobile Frontend-Anpassungslösung (Zusammenfassung)

Ich habe online gesucht und festgestellt, dass in vielen Interviews Fragen zu mobilen Anpassungsmethoden gestellt werden. Ich habe kürzlich einige Artikel gelesen und möchte sie hier zusammenfassen.

Lassen Sie uns zunächst über einige technische Lösungen für die Anpassung mobiler Endgeräte sprechen, die bisher erschienen sind:

• (1) Durch Media Queries, also CSS3-Media Queries
• (2) Flex-Layout dargestellt durch die Tmall-Homepage
• (3) Rem+Viewport-Skalierung, wie sie auf der Taobao-Homepage dargestellt wird
• (4) REM-Methode

1. Medienanfragen

Man kann sagen, dass meida queries die Layoutmethode ist, die ich früh übernommen habe. Sie führt hauptsächlich verschiedene css Codes aus, indem sie die Breite des Geräts abfragt, um letztendlich die Schnittstellenkonfiguration zu erreichen. Die Kernsyntax lautet:

@media screen and (max-width: 600px) { /*Wenn die Bildschirmgröße weniger als 600 Pixel beträgt, wenden Sie den folgenden CSS-Stil an*/
  /*Ihr CSS-Code*/
}

Vorteil

• Mithilfe von Media Query lässt sich das Pixelverhältnis des Geräts bestimmen. Die Methode ist einfach und kostengünstig, insbesondere wenn für Mobilgeräte und PCs derselbe Codesatz verwendet wird. Derzeit verwenden Frameworks wie Bootstrap diese Layoutmethode
• Das Bild lässt sich leicht ändern. Ändern Sie einfach die CSS-Datei
• Bei angepasster Bildschirmbreite kann die Seite responsive dargestellt werden, ohne dass die Seite neu geladen werden muss

Mangel

• Die Codemenge ist relativ groß und die Wartung ist umständlich
• Um große Bildschirme oder hochauflösende Geräte unterzubringen, werden andere Geräteressourcen verschwendet, insbesondere das Laden von Bildressourcen.
• Um die reaktionsschnellen Anzeigeeffekte von Mobilgeräten und PCs zu berücksichtigen, ist es unvermeidlich, dass ihre einzigartigen Interaktionsmethoden verloren gehen.

2.Flexibles Layout

Lassen Sie uns zur Veranschaulichung die Implementierungsmethode von Tmall verwenden:

Sein viewport ist fest: <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

Die Höhe ist fest, die Breite adaptiv und alle Elemente verwenden px als Einheit.

Wenn sich die Bildschirmbreite ändert, ändert sich auch die Seite entsprechend. Der Effekt ist ähnlich dem fließenden Layout einer PC-Seite. Wenn die Breite angepasst werden muss, verwenden Sie einfach das responsive Layout (z. B. NetEase News), damit eine „Anpassung“ erreicht wird.

3. rem + Ansichtsfensterskalierung

Dies ist auch die von Taobao verwendete Lösung. rem Wert wird entsprechend der Bildschirmbreite festgelegt. Elemente, die angepasst werden müssen, verwenden rem als Einheit, und Elemente, die nicht angepasst werden müssen, verwenden weiterhin px als Einheit. (1em = 16px)

PS: rem
rem ist eine in CSS3 neu hinzugefügte relative Einheit (root em), die große Aufmerksamkeit erregt hat. Wie unterscheidet sich diese Einheit von anderen?
Der Unterschied besteht darin, dass die Schriftgröße eines Elements, wenn Sie sie mit „rem“ festlegen, zwar immer noch relativ ist, jedoch nur relativ zum HTML-Stammelement. Diese Einheit kombiniert die Vorteile der relativen und absoluten Größe. Sie kann verwendet werden, um alle Schriftgrößen proportional anzupassen, indem nur das Stammelement geändert wird. Gleichzeitig wird die Kettenreaktion vermieden, bei der die Schriftgrößen Schicht für Schicht zusammengesetzt werden. Derzeit unterstützen alle Browser außer IE8 und früheren Versionen rem. Für Browser, die dies nicht unterstützen, ist die Lösung auch sehr einfach: Sie müssen eine zusätzliche Deklaration der absoluten Einheiten schreiben. Diese Browser ignorieren die in rem eingestellten Schriftgrößen. Beispiel: p{font-size:14px;font-size:0.875rem;}
(Empfohlenes Tool zur Einheitenumrechnung: http://pxtoem.com/)

Umsetzungsprinzip

Vergrößern Sie die Seite entsprechend rem um dpr -fache und stellen Sie dann viewport auf 1/dpr ein.

Wenn der DPR des iPhone 6 Plus 3 ist, wird die Seite dreimal vergrößert, und 1px (CSS-Einheit) entspricht im Plus standardmäßig 3px (physisches Pixel).
Stellen Sie dann viewport auf 1/3 ein, sodass die gesamte Seite wieder auf ihre ursprüngliche Größe verkleinert wird und so eine hohe Auflösung erreicht wird.

Auf diese Weise entspricht die Seitenbreite der gesamten Webseite bei der Anzeige auf dem Gerät der logischen Pixelgröße des Geräts, d. h. device-width .
Die Berechnungsformel für diese device-width lautet:設備的物理分辨率/(devicePixelRatio * scale) ,
Wenn der Maßstab 1 ist, device-width = 設備的物理分辨率/devicePixelRatio .

4. Rem-Umsetzung

Beispielsweise ist bei der Implementierung des mobilen Endgeräts „Meizu“ auch viewport festgelegt:

<meta name="viewport" content="width=Gerätebreite,Anfangsskalierung=1,Maximalskalierung=1,Benutzerskalierung=nein">

Verwenden Sie den folgenden Code, um den rem Referenzwert zu steuern (die tatsächliche Größe des Designs wird mit einer Breite von 720 Pixeln gemessen).

!Funktion (d) {
    var c = d.Dokument;
    var a = c.documentElement;
    var b = d.devicePixelRatio;
    var f;

    Funktion e() {
      var h = a.getBoundingClientRect().width, g;
      wenn (b === 1) {
        h = 720
      }
      if(h>720) h = 720; //Grenzwert des Referenzwerts festlegen g = h / 7,2;
      a.style.fontSize = g + "px"
    }

    wenn (b > 2) {
      b = 3
    } anders {
      wenn (b > 1) {
        b = 2
      } anders {
        b = 1
      }
    }
    a.setAttribute("data-dpr", b);
    d.addEventListener("Größe ändern", Funktion () {
      clearTimeout(f);
      f = setzeTimeout(e, 200)
    }, FALSCH);
    e()
  }(Fenster);

css wird durch sass vorkompiliert und die Variable $px wird gesetzt, um den gemessenen px Wert in rem umzuwandeln $px: (1/100)+rem;

1 Pixel Rand HD

1. Taobao-Implementierungsmethode

Die oben erwähnte Taobao-Implementierungsmethode besteht darin, rem + viewport zu verwenden, um dies zu erreichen.

transform: scale(0.5)

CSS Code:

div{
    Breite: 1px;
    Höhe: 100%;
    Anzeige: Block;
    Rahmen links: 1px durchgezogen #e5e5e5;
    -webkit-transform: Skalierung(.5);
    transformieren: scaleX(.5);
}

Mangel:

Abgerundete Ecken können nicht erreicht werden, und es ist mühsam, 4 Ränder zu erreichen, und es kann nur einzeln erreicht werden. Bei Verschachtelung hat dies unerwünschte Auswirkungen auf die enthaltenen Effekte, daher wird diese Lösung häufiger unabhängig mit :after und before verwendet.

box-shadow

Implementierungsmethode:

Verwenden Sie CSS, um Schatten zu verarbeiten und einen 0,5-Pixel-Effekt zu erzielen.

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0,5);

Vorteil:

Es kann grundsätzlich alle Szenarien abdecken, einschließlich abgerundeter Schaltflächen, einzelner Linien und mehrerer Linien.

Mangel:

Farben sind schwierig zu handhaben und Schwarz rgba(0,0,0,1) ist der dunkelste Fall. Es gibt Schatten, die nicht einfach zu verwenden sind.
Die übermäßige Verwendung von box-shadow kann zu Leistungsengpässen führen.
Die Auswirkungen der Implementierung von vier Grenzen sind nicht ideal.

2. Bildimplementierung

Es gibt zwei Möglichkeiten, mit background-image 1 Pixel zu erreichen: linear-gradient oder die direkte Verwendung eines Bildes ( base64 ).

linear-gradient (50 % farbig, 50 % transparent)

Einzeilig:

div{
    Höhe: 1px;
    Hintergrundbild: -webkit-linear-gradient (oben, transparent 50 %, #000 50 %);
    Hintergrundposition: oben links;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundgröße: 100 % 1px;
}

Mehrere Zeilen:

div{
    Hintergrundbild: -webkit-linear-gradient(oben,transparent 50%,#000 50%),
    -webkit-linear-gradient(unten, transparent 50%, #000 50%),
    -webkit-linear-gradient(links, transparent 50%, #000 50%),
    -webkit-linear-gradient(rechts, transparent 50 %, #000 50 %);
    Hintergrundgröße: 100 % 1px, 100 % 1px, 1px 100 %, 1px 100 %;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundposition: oben links, unten links, links oben, rechts oben;

Vorteil:
Sie können einen einzelnen Rahmen oder mehrere Rahmen festlegen und die Farbe festlegen

Mangel:
Der übermäßige Einsatz von Farbverläufen kann zu Leistungsengpässen führen Große Codemengen Hintergrundbilder haben Kompatibilitätsprobleme

Dies ist das Ende dieses Artikels über die mobile Front-End-Anpassungslösung (Zusammenfassung). Weitere relevante Inhalte zur mobilen Front-End-Anpassung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!