WeChatミニプログラムRPXユニット

rpx単位はWeChatアプレットのCSSのサイズ単位であり、rpxは画面幅に応じて調整できます。指定した画面幅は750rpxです。たとえば、iPhone6 では、画面幅が 375px で、合計 750 物理ピクセルがある場合、750rpx = 375px = 750 物理ピクセル、1rpx = 0.

WeChat アプレット サイズ単位

rpx 単位は、CSS のサイズ単位です。 WeChat アプレット、rpx は画面幅に応じて適応できます。指定した画面幅は750rpxです。たとえば、iPhone6 では、画面幅が 375px で、合計 750 物理ピクセルがある場合、750rpx = 375px = 750 物理ピクセル、1rpx = 0.5px = 1 物理ピクセルとなります。

デバイスrpxからpx(画面幅/750)pxからpx(750/画面幅)iPhone51rpx = 0.42pxiPhone6iPhone6sアプレットは、rem サイズ単位、rem と rpx の変換もサポートしています。 : rem: 指定された画面幅は 20rem、1rem = (750/20)rpx 注: WeChat ミニ プログラムを開発する場合、デザイナーはビジュアル ドラフトの標準として iPhone6 を使用できます。

	1ピクセル = 2.34rpx
1px = 0.5px	1px = 2rpx
1px = 0.552px	1px = 1.81px

提案: デザインドラフトでデバイス幅 750px を使用すると、計算が簡単になります。750px が 750px の場合、1rpx = 1px となるため、デザイン図面上で測定されたサイズが rpx の数になります。 . さまざまなデバイスで実際に何レムに変換する必要があるかについては、ミニプログラム自体に変換を行わせます

ミニプログラムのスタイルインポート

@import ステートメントを使用して、外部スタイルシートをインポートします。インポートする必要がある外部スタイル シートの相対パスが続き、「;」はステートメントの終わりを示します。

サンプルコード:

/** common.wxss **/.small-p {  padding:5px;
}

/** app.wxss **/
@import "common.wxss";.middle-p {  padding:15px;
}

ミニプログラムインラインスタイル

Frameコンポーネントは、コンポーネントのスタイルを制御するためのstyle属性とclass属性の使用をサポートしています。

style: 静的スタイルはクラス内で均一に記述されます。 style は動的スタイルを受け取り、実行時にそれらを解析します。レンダリング速度への影響を避けるために、静的スタイルを style に書き込むことは避けてください。

• <view style="color:{{color}};" />

class: スタイル ルールを指定するために使用されます。その属性値は、スタイル ルール内のクラス セレクター名 (スタイル クラス名) のコレクションです。スタイル クラス名には、スペースが使用されます。スタイルクラス名の間は区切ります。

• <view class="normal_view" />

  cssセレクター

WeChatアプレットで現在サポートされているセレクターは次のとおりです:

selectorサンプルサンプルの説明.class .intro クラスを持つすべてのコンポーネントを選択します="intro"#id#firstname id="firstname"のコンポーネントを選択elementviewすべてのビューコンポーネントを選択element、elementviewチェックボックスすべてのドキュメントとすべてのチェックボックスコンポーネントのビューコンポーネントを選択します::afterview::afterビューコンポーネントの後にコンテンツを挿入します::beforeview ::beforeコンテンツを挿入ビューコンポーネントの前 アプレットのグローバルスタイルとローカルスタイル app.wxss で定義されたスタイルはグローバルスタイルであり、すべてのページに適用されます。ページの wxss ファイルで定義されたスタイルはローカル スタイルであり、対応するページにのみ適用され、app.wxss 内の同じセレクターをオーバーライドします。

WeChat ミニ プログラム rpx ユニットに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。