uniapp でサイズ変換を実装する方法 (2 つの方法)

モバイル インターネットの急速な発展に伴い、情報、通信、エンターテイメントを得るために携帯電話のアプリケーションを使用する人が増えています。現時点ではマルチプラットフォームソリューションの必要性がますます高まっており、uniappはVueをベースに開発されたマルチターミナル開発フレームワークで、アプリケーションのコードセットを記述して複数のプラットフォームに公開するだけで済みます。

uniapp の利点は自明ですが、それに伴う問題もいくつかあります。最も一般的な問題はサイズの適応です。画面サイズ、dpi、ピクセルなどのパラメータはデバイスによって異なるため、デバイスに合わせてアプリケーションを全画面表示できるようにする必要があります。

uniapp でサイズ変換を実現するには、通常、レムレス法と単位変換法という 2 つの方法があります。以下では、これら 2 つの方法の実装方法をそれぞれ紹介します。

1. remlessメソッド

remは相対的な長さの単位で、ルート要素のフォントサイズに対する相対的な単位で、通常はルート要素のフォントサイズです。要素は16pxです。次に、uniapp では、ルート要素のフォントを 750 の 10 分の 1、つまり 75 ピクセルに設定し、すべてのサイズをレム単位で計算して、さまざまな画面サイズに適応できるようにします。

さらに、開発をさらに簡素化するために、less を使用してスタイル ファイルを処理し、その変数と混合関数を使用してサイズ変換を実現できます。

具体的な実装方法は以下のとおりです。

(1) プロジェクトのルートディレクトリに以下の内容のconfig.lessファイルを作成します。

// 幅を定義します。デザイン ドラフトの
@designWidth: 750;

// ルート要素のフォント サイズを定義します。これは、デザイン ドラフトの幅の 10 分の 1 です。
@rootFont: (@designWidth / 10);

// 定義 rem 変換関数
rem(@pxValue) {
return (@pxValue / @rootFont) rem;
}

(2 ) サイズ変換を使用する必要があるスタイル ファイルで、config.less ファイルを導入し、計算に rem 関数を使用します (例:

@import "config.less";

)。 btn {
font-size: rem(32px);
width: rem(100px);
}

このようにして、異なるデバイスでも同じ表示効果を実現できます。

2. 単位変換方法

サイズ変換を実現するもう 1 つの方法は、uniapp が提供する API を使用して単位を rpx、upx、px などの単位に変換することです。この方法は比較的単純で、wxss ファイルで API を直接使用するだけです。

たとえば、フォント サイズを 32px に設定し、変換に rpx モードを使用したい場合のコードは次のとおりです:

.upx{
font-size: uni.upx2px (32) uni.upx2rpx(32);
}

このうち、uni.upx2px(32)は32upxをピクセル単位に変換することを意味し、uni.upx2rpx(32)は32upxをrpx単位に変換することを意味します。このようにして、異なるデバイスでも同じ表示効果を実現できます。

まとめると、uniapp は非常に優れたマルチターミナル開発フレームワークですが、開発プロセスではサイズ適応の問題が避けられません。ただし、レムレス法または単位変換法を使用してこの問題を解決すると、アプリケーションがさまざまなデバイスに適応して全画面で表示できるようになります。

以上がuniapp でサイズ変換を実装する方法 (2 つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。