CSS-Pixel und Lösungen für verschiedene Probleme bei der Anpassung mobiler Bildschirme

Pixel

Auflösung

Mit der Monitorauflösung ist eigentlich die vom Desktop festgelegte Auflösung gemeint, nicht die physikalische Auflösung des Monitors. Es ist nur so, dass LCD-Monitore mittlerweile zum Mainstream geworden sind. Da sich das Anzeigeprinzip von LCD von dem von CRT unterscheidet, ist der Anzeigeeffekt nur dann optimal, wenn die Desktop-Auflösung mit der physischen Auflösung übereinstimmt. Daher stimmt unsere Desktop-Auflösung fast immer mit der physischen Auflösung des Monitors überein.

UI-Entwurfspixel

Die Pixel des UI-Entwurfs beziehen sich auf die physischen Pixel. Beispielsweise sind 750 Pixel die physischen Pixel des UI-Designentwurfs, den wir erhalten haben.

Front-End-Pixel

Solange die logischen Pixel der beiden Bildschirme gleich sind, sind auch ihre Anzeigeeffekte gleich. Das heißt, die Pixel in der CSS-Welt sind gleich und der Anzeigeeffekt auf Bildschirmen gleicher physischer Größe ist gleich

Welche Beziehung besteht also zwischen ihnen, wenn sie tatsächlich auf dem Bildschirm angezeigt werden?

Wenn wir, wie in der folgenden Abbildung gezeigt, das CSS-Pixel (Breite: 2px, Höhe: 2px) eines Elements auf einer Webseite festlegen, belegt es letztendlich vier physische Pixel auf einem Display mit dpr=1 und 16 physische Pixel auf einem Display mit dpr=2. Daraus können wir schließen, dass die physische Größe der CSS-Pixel auf verschiedenen Bildschirmen konsistent ist, die Anzahl der physischen Pixel, die einem CSS-Pixel entsprechen, jedoch unterschiedlich ist.

REM-Adaptionslösungen für verschiedene Bildschirme

<!-- m Station mobile Terminalanpassung js -->

  // An physikalische Pixelbreite anpassen 750 1rem=100px   
  // Clientbreite (tatsächlicher logischer Pixel) / 375 (logischer Referenz-Benchmark-Pixel) = Schriftgröße (tatsächlicher 1-rem-Pixelwert) / 100 (logischer 1-rem-Referenz-Pixelwert)
  ;(Funktion(win, doc){
    Funktion ändern(){
        doc.documentElement.style.Schriftgröße=100*doc.documentElement.clientWidth/375+'px';
    }
    ändern();
    win.addEventListener('Größe ändern', ändern, falsch);
  })(Fenster, Dokument);
  // Auf diese Weise können wir den tatsächlichen Wert von 1rem unter verschiedenen logischen Pixeln berechnen. // In der tatsächlichen Arbeit müssen wir, wenn die Breite des UI-Designentwurfs 750 Pixel beträgt, die gemessene Breite durch 200 teilen
  // Wenn wir die Konsole öffnen, um den Abstand zwischen den Elementen zu prüfen, beträgt dieser die Hälfte des Abstands im Designentwurf. Der physische Pixel des Designentwurfs beträgt 2px, was dem logischen Pixel 1px entspricht.
  // Die aktuellen Designentwürfe unseres Unternehmens basieren alle auf Blue Lake. Die Breite beträgt standardmäßig 375. Wir müssen also nur die gemessene Breite durch 100 teilen, um die tatsächliche Breite in rem zu erhalten.

  // Anhang: Natürlich gibt es auch andere Anpassungsschemata, aber das rem-Prinzip ist dasselbe, es sei denn, das rem-Schema wird nicht übernommen

Warum benötigen Apple-Telefone doppelte oder dreifache Bilder?

Nehmen wir als Beispiel einen 2x-Bildschirm

Das ursprüngliche 2 x 2 Pixelbild besteht aus 4 x 4 Pixeln auf einem 2x-Bildschirm. Die zu zeichnenden Pixel suchen also nach ähnlichen Pixeln in der Umgebung, wodurch ein Unschärfeproblem entsteht. Um bei der Arbeit hochauflösende Bilder anzuzeigen, wird im Allgemeinen das Doppelbild von Apple verwendet.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.