So passen Sie ionic2 an Mobiltelefone, Tablets und andere Geräte an

In diesem Artikel wird hauptsächlich der Beispielcode für die ionic2-Bildschirmanpassung zur Anpassung an Mobiltelefone, Tablets und andere Geräte vorgestellt. Er hat einen gewissen Referenzwert und interessierte Freunde können darauf verweisen.

In diesem Artikel wird der Beispielcode für die Anpassung des ionic2-Bildschirms an Mobiltelefone, Tablets und andere Geräte vorgestellt. Die Details lauten wie folgt:

Die empfohlenen Herausgeber ist: VS-Code (Visual Studio Code) => Nur für die Bearbeitung von Dokumenten verantwortlich, nicht für das Kompilieren.

Und WebStorm verfügt über Überprüfung und Kompilierung usw. Als ionic1 entwickelt wurde, war es sehr praktisch, jederzeit mit dem Browser auf die Schaltfläche zu klicken, um den Effekt zu durchsuchen. Nach der Entwicklung von ionic2, ionic2 verfügt über eine automatische Überprüfung und Zusammenstellung, die als Webstorm-Karte angezeigt wird. Pause, kann nicht bearbeitet werden.

1. Fügen Sie zunächst eine Seite als Test hinzu

Das von mir verwendete Projekt ist Sidemenu

im Projektverzeichnis Führen Sie den folgenden Befehl aus: ionic g page page4

2. Führen Sie den Befehl aus, um das Browser-Debugging zu öffnen

Ionic Serve

3. Ändern Sie den Inhalt der Datei page4.html wie folgt:

<ion-header > 
 <ion-navbar > 
  <button ion-button menuToggle> 
   <ion-icon name="menu"></ion-icon> 
  </button> 
  <ion-title>title</ion-title> 
 </ion-navbar> 
</ion-header> 
 
 
<ion-content style="background-color: #abaaaa;"> 
  <ion-grid style="height: 100%; display: flex; padding: 0px;"> 
    <ion-row style="background-color: #abaaaa; flex: 2;">  
     <ion-col style="flex: 1; padding: 10px 10px 5px 10px; " > 
      <ion-card style="height: 100%; width: 100%; margin: 0px; background-color: #cdcecf"> 
        <ion-card-content style="height: calc(100% - 30px);"> 
         card content 
        </ion-card-content> 
      </ion-card> 
     </ion-col> 
    </ion-row> 
    <ion-row style="background-color: #abaaaa; flex: 4;">  
     <ion-col style="flex: 1; padding: 5px 10px 10px 10px; " > 
      <ion-card style="height: 100%; width: 100%; margin: 0px; background-color: #434343"> 
 
        <ion-card-content style="height: calc(100% - 30px);"> 
         content 
        </ion-card-content> 
       </ion-card> 
      </ion-col> 
    </ion-row> 
  </ion-grid> 
</ion-content>

Tatsächlich Referenz hier ist c451b5e45e08268c0a8b36c1ede368d371cd1212cbe2291f84c43022a5f5450f, dieser Code zeigt, wie ionic2 ein dynamisches Selbstnutzungslayout implementiert

4. Testeffekt:

Verwenden Sie die Maus, um den Browserrahmen zu ziehen, um die Seitengröße anzupassen. Die Seitenelemente, die sich ionisch entwickeln, werden sich ebenfalls mit der dynamischen Größe verformen. Wenn diese Software in das Plattforminstallationspaket kompiliert wird. Wenn beispielsweise Android kompiliert wird, passt sich die Seite an den Android-Bildschirm an. Geräteanpassung an unterschiedliche Bildschirmgrößen implementiert.

Das obige ist der detaillierte Inhalt vonSo passen Sie ionic2 an Mobiltelefone, Tablets und andere Geräte an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!