技術共有

ユニアプリ適応ソリューション

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

uni-app 独自の強力なアダプティブ ユニット upx および rpx には、ソリューションを動的に割り当てることができません...

uni-app は、デフォルトのサイズ単位として upx を使用します。これは、基本幅に対する相対的な単位であり、画面の幅に応じて調整できます。 uni-app は画面ベース幅 750upx を指定します。

開発者は、デザイン ドラフトのベース幅からページ要素の upx 値を計算できます。デザイン ドラフトの 1px とフレーム スタイルの 1upx の間の変換式は次のとおりです。
デザイン案 1px / デザイン案ベース幅 = フレーム スタイル 1upx / 750upx

例えば:
デザイン ドラフトの幅が 640 ピクセル、デザイン ドラフト上の要素 A の幅が 100 ピクセルの場合、ユニアプリの要素 A の幅は 750 *100 / 640 に設定する必要があり、結果は 117upx になります。
デザイン ドラフトの幅が 375 ピクセル、デザイン ドラフト上の要素 B の幅が 200 ピクセルの場合、ユニアプリの要素 B の幅は 750 * 200 / 375 に設定する必要があり、結果は 400upx になります。

以下に示すように、デザイン ドラフトの幅は 1920 です。

ここに画像の説明を挿入します
------式によると设计稿宽度 / 750 = 比率 次に、1920/750=2.56 により、1920 幅設計ドラフトの標準 750 パーセンテージが計算されます。

便宜上、Hbuilder X をクリックしてください工具>设置>语言服务配置一番下までスクロールすると、px to rpx/upx があるので、そこに上で計算した比率を入力します。

ここに画像の説明を挿入します
実際の効果:

ここに画像の説明を挿入します
このようにして、入力した px サイズは、対応する upx サイズに自動的に変換されます。

upxを選択するだけです