WeChatミニプログラムのrpxサイズ単位とスタイルの使用方法の詳細な説明

この記事では、WeChat アプレットの rpx サイズ単位とスタイルの詳細に関する関連情報を主に紹介します。これは、誰もが WeChat アプレットを開発し、携帯電話のサイズの問題を回避するのに効果的に役立ちます。

WeChat アプレットのサイズ。単位

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

WeChat アプレットは、rem と rpx の間の変換関係もサポートしています: rem: 指定された画面幅は 20rem; 1rem = (750/20)rpx

注: デザイナーは開発時にこれを使用できます。 WeChat アプレット iPhone6 はモックアップの標準として機能します。
提案: デザインドラフトでデバイス幅 750px を使用すると、計算が簡単になります。750px が 750px の場合、1rpx = 1px となるため、デザイン図面上で測定されたサイズが rpx の数になります。さまざまなデバイスで実際に何レムに変換する必要があるかについては、ミニ プログラム自体に変換を行わせます

ミニ プログラムのスタイルをインポートする方法

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

サンプルコード:

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

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

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

フレームコンポーネントは、コンポーネントのスタイルを制御するためのスタイル属性とクラス属性の使用をサポートしています。

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

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

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

<view class="normal_view" />

WeChat アプレット CSS セレクター

WeChat アプレットは現在セレクターをサポートしています:

selector

サンプル

サンプルの説明

アプレットのグローバル スタイルとローカル スタイル

定義 app.wxss のスタイルは次のとおりです。グローバルスタイルすべてのページに適用します。ページの wxss ファイルで定義されたスタイルはローカル スタイルであり、対応するページにのみ適用され、app.wxss 内の同じセレクターをオーバーライドします。

以上がWeChatミニプログラムのrpxサイズ単位とスタイルの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。