WeChat ミニプログラムでの WXSS の概要-ミニプログラム開発-php.cn

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

不言

リリース： 2018-06-27 17:40:38

オリジナル

2093 人が閲覧しました

この記事では主に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	コンテンツを前に挿入ビューコンポーネントの