WeChat ミニ プログラムでの WXSS の概要

この記事では主にWeChatアプレットWXSSの関連情報を紹介し、簡単なサンプルコードを添付していますので、必要な方は参考にしてください

WXSS

WXSS (WeiXin Style Sheets) はMINAによって設計されたスタイル言語です。 WXML コンポーネント スタイル。

WXSS は、WXML コンポーネントの表示方法を決定するために使用されます。

大多数のフロントエンド開発者に適応するために、私たちの WXSS は CSS のほとんどの機能を備えています。 同時に、WeChat アプレットの開発により適したものにするために、CSS を拡張および変更しました。

CSS と比較して、拡張機能には以下が含まれます:

サイズ単位
スタイルのインポート

サイズ単位

rpx (レスポンシブ ピクセル): 画面の幅に応じて調整できます。指定した画面幅は750rpxです。たとえば、iPhone 6 では、画面幅が 375px で、合計 750 物理ピクセルがある場合、750rpx = 375px = 750 物理ピクセル、1rpx = 0.5px = 1 物理ピクセルとなります。

デバイス	rpxからpx (画面幅/750)	pxからpx(750/画面幅)
iPhone5	1rpx = 0.42px	1 px = 2 .34px
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

レム( root em): 画面幅を 20rem に指定します。 1レム=(750/20)rpx。

提案: WeChat ミニプログラムを開発するとき、デザイナーはビジュアルドラフトの標準として iPhone6 を使用できます。

スタイルインポート

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

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

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

インラインスタイル

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

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

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

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

<view class="normal_view" />

Selector

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

Selector	Sample	Sample description
.class	.inトロ	class= を持つコンポーネントをすべて選択しますintro"
#id	#firstname	id="firstname" のコンポーネントを選択
element	view	すべてのビューコンポーネントを選択
element、element	チェックボックス	選択すべてのドキュメントとすべてのチェックボックス コンポーネントのビュー コンポーネント
::after	view::after	ビュー コンポーネントの後にコンテンツを挿入します
::before	view::before	コンテンツを前に挿入ビュー コンポーネントの

グローバル スタイルとローカル スタイル

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

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

WeChatアプレットスライダーの紹介

トップタブ(スワイパー)のWeChatアプレット実装の紹介

WeChat JS-SDKの携帯電話写真のアップロードを選択する機能について

以上がWeChat ミニ プログラムでの WXSS の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。