uniappで750幅を設定する方法

フロントエンド開発では、適応は非常に重要な問題です。画面サイズやデバイスが異なると、ページの表示も異なります。 uniapp では、幅 750 を設定することでこの問題を解決できます。

幅 750 はどこから来たのですか?

幅 750 は、モバイル開発における一般的な設計ドラフト サイズです。通常、デザイナーはUIデザイン案の幅を750に設定し、高さは実際の状況に基づいて決定されます。デザイン案の幅が750なのはなぜですか？これは、多くのモバイル デバイスの最小解像度が 750 であるためです。たとえば、iPhone XR の解像度は 828*1792 で、基本的に 1:1.78 の比率を満たします。

uniapp で幅 750 を設定するにはどうすればよいですか?

uniapp を開発する前に、uni-app プラグインをインストールする必要があります。インストールが成功したら、コードの記述を開始します。

1. main.js ファイルに、次のコードを追加します。

import 'uni-percentage-support'

このコード行により、uni-percentage-support プラグインを uniapp に導入します。したがって、ページはそれに応じて調整されます。

2. App.vue ファイルに次のコードを追加します。

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

ここでは、px の代わりに vw (ウィンドウのパーセント単位) を使用します。このうち、1vw はウィンドウ幅の 1% に相当します。幅 750 に基づいて適応する必要があるため、ルート要素 html のフォント サイズを 50vw に設定し、ページが幅 750 に基づいて適応できるようにします。

3. 調整する必要があるページで、次のコードを記述します:

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

ここでは、コンテナの幅を 100% に、高さを 100 に設定します。 %。内部的には、幅 37.5rem、高さ 3rem のラベルを設定し、margin: 0 auto を使用して中央に配置します。 App.vue ファイルでは html のフォント サイズを 50vw に設定しているため、ここでの 37.5rem は実際には 750px に等しくなります。

上記の操作により、幅 750 を基準にページを調整することができます。

まとめ

uniappでは幅を750にして適応するのが一般的な方法です。 uni-percentage-support プラグインをインストールし、HTML のフォント サイズを設定すると、750 幅に基づいてページを調整できるため、さまざまなデバイスの画面に同様の効果を表示できます。もちろん、これらのパラメータを実際の状況に応じて調整して、最良の結果を達成することもできます。

以上がuniappで750幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。