So stellen Sie die Breite 750 in Uniapp ein

In der Frontend-Entwicklung ist die Anpassung ein sehr wichtiges Thema. Denn unterschiedliche Bildschirmgrößen und unterschiedliche Geräte führen dazu, dass die Seite unterschiedlich angezeigt wird. In Uniapp können wir dieses Problem lösen, indem wir die Breite auf 750 einstellen.

Woher kommt die 750er Breite?

750 Breite ist eine gängige Designentwurfsgröße in der mobilen Entwicklung. Unter normalen Umständen legen Designer die Breite des UI-Designentwurfs auf 750 fest und die Höhe wird basierend auf der tatsächlichen Situation bestimmt. Warum beträgt die Breite des Designentwurfs 750? Dies liegt daran, dass die Mindestauflösung vieler Mobilgeräte 750 beträgt. Beispielsweise beträgt die Auflösung des iPhone XR 828*1792, was grundsätzlich dem Verhältnis 1:1,78 entspricht.

Wie stelle ich in Uniapp eine Breite von 750 ein?

Bevor Sie Uniapp entwickeln, müssen Sie das Uni-App-Plug-In installieren. Nach erfolgreicher Installation beginnen Sie mit dem Schreiben von Code.

1. Fügen Sie in der Datei main.js den folgenden Code hinzu:

import 'uni-percentage-support'

Mit dieser Codezeile führen wir das Uni-Percentage-Support-Plugin in uniapp ein, um entsprechende Anpassungen an der Seite vorzunehmen.

2. Fügen Sie in der App.vue-Datei den folgenden Code hinzu:

<style>
  html{
    font-size:50vw;
  }
</style>

Hier verwenden wir vw (Ansichtsfenster-Prozenteinheit) anstelle von px. Dabei entspricht 1vw 1 % der Fensterbreite. Da wir eine Anpassung basierend auf der Breite von 750 vornehmen müssen, setzen wir die Schriftgröße des Stammelements HTML auf 50vw, damit die Seite basierend auf der Breite von 750 angepasst werden kann.

3. Schreiben Sie auf der Seite, die angepasst werden muss, den folgenden Code:

<view style="width:100%;height: 100%;background-color:#f5f5f5;">
  <view style="width:37.5rem;height:3rem;margin: 0 auto;background-color:#409EFF;border-radius:5px;"></view>
</view>

Hier setzen wir die Breite des Containers auf 100 % und die Höhe auf 100 %. Intern legen wir eine Beschriftung mit einer Breite von 37,5rem und einer Höhe von 3rem fest und verwenden margin: 0 auto, um sie zu zentrieren. Da wir die Schriftgröße von HTML in der App.vue-Datei auf 50vw eingestellt haben, entspricht 37,5rem hier tatsächlich 750px.

Durch die oben genannten Vorgänge kann die Seite basierend auf der Breite von 750 angepasst werden.

Zusammenfassung

In Uniapp ist es eine gängige Methode zur Anpassung, indem die Breite auf 750 eingestellt wird. Durch die Installation des Uni-Percentage-Support-Plugins und die Festlegung der Schriftgröße des HTML können wir die Seite basierend auf der Breite von 750 anpassen und so ähnliche Effekte auf den Bildschirmen verschiedener Geräte erzielen. Natürlich können diese Parameter auch entsprechend der tatsächlichen Situation angepasst werden, um die besten Ergebnisse zu erzielen.

Das obige ist der detaillierte Inhalt vonSo stellen Sie die Breite 750 in Uniapp ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!