ホームページ >WeChat アプレット >ミニプログラム開発 >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 JS-SDKの携帯電話写真のアップロードを選択する機能について
以上がWeChat ミニ プログラムでの WXSS の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。