ionic2 を携帯電話、タブレット、その他のデバイスに適応させる方法

この記事では主に、携帯電話、タブレット、その他のデバイスに適応するためのionic2画面適応のサンプルコードを紹介します。これには一定の参考値があり、興味のある友人はそれを参照できます。

この記事では、携帯電話、タブレット、その他のデバイスに適応するための ionic2 画面適応のサンプル コードを紹介します。詳細は次のとおりです。

推奨エディターは次のとおりです。 VS code (Visual Studio)コード) => ドキュメントの編集のみを担当し、コンパイルは行いません。

そして、WebStormにはチェックやコンパイルなどが備わっています。ionic1が開発されたときは、ブラウザを使用してボタンをクリックするといつでもエフェクトを参照できて非常に便利でしたが、ionic2の開発後はionic2が自動的にコンパイルをチェックするようになりました。ウェブストームがフリーズして編集できなくなる可能性があります。

1. まずテストとしてサイドを追加します

私が使用するプロジェクトはsidemenuです

プロジェクトディレクトリで次のコマンドを実行します: ionic g page page4

2. コマンドを実行して開きます。デバッグ用のブラウザ

Ionicserve

3. page4.html ファイルのコンテンツを次のように変更します。

<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>

実際、ここでの参照は b7959082b001c829a9e672433c4f2980 このコードは、ionic2 が動的自己使用レイアウトを実装する方法を示しています

4. テスト効果:

マウスを使用してブラウザの境界線をドラッグし、ページ サイズを調整します。 ionic を開発するページ要素も、動的なサイズに合わせて変形します。このソフトウェアがプラットフォーム インストール パッケージにコンパイルされる場合。たとえば、Android がコンパイルされている場合、ページは Android 画面に適応します。さまざまな画面サイズへのデバイスの適応を実装しました。

以上がionic2 を携帯電話、タブレット、その他のデバイスに適応させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。