uni-appのスタイルの詳細な説明

uni-app のスタイル

• sassプラグインは公式ウェブサイトからダウンロードし、指示に従うだけです。
• rpx は responsive px の略で、画面の幅に合わせて変化する動的な単位です。幅 750 の画面を基準とすると、750rpx がまさに画面の幅になります。画面が広くなると、rpx の実際の表示効果も比例して拡大されます。
• 外部スタイルシートをインポートするには、 @importステートメントを使用します。 @import後には、インポートする外部スタイルシートの相対パスが続き、; はステートメントの終わりを示します。
• App.vue で定義されたスタイルはグローバル スタイルであり、すべてのページに適用されます。 pages ディレクトリの下の vue ファイルで定義されたスタイルはローカル スタイルであり、対応するページにのみ適用され、App.vue 内の同じセレクターをオーバーライドします。

uni-app はフォントアイコンの使用をサポートしています。使い方は通常の Web プロジェクトと同じです。以下の点に注意してください。

• フォント ファイルが 40kb より小さい場合、uni-app はそれを自動的に base64 形式に変換します。
  
• フォント ファイルは 40kb 以上であり、開発者が自分で変換する必要があります。そうしないと、効果がありません。
  
• フォントファイルの参照パスには、~@ で始まる絶対パスを使用することをお勧めします。

<テンプレート>
	<表示>
		<表示>
			スタイル学習 </view>
		<ビュークラス="box1">
			テストテキスト <text>123</text>
		</ビュー>
		<view class="iconfont icon-shipin">
		</ビュー>
	</ビュー>
</テンプレート>
<スクリプト>
</スクリプト>
<スタイル lang="scss">
	@import url("./a.css"); // インポートされた外部 CSS ファイル .box1{
		width: 350rpx; //rpx はボックスだけでなくテキストにも使用できます height: 350rpx;
		背景: 赤;
		フォントサイズ: 50rpx;
		色: #FFFFFF;
		文章{
			色: ピンク;
		}
	}
</スタイル>

App.vueで共通のグローバルスタイルを定義する

<スタイル>
	/*各ページに共通のCSS */
	// グローバル スタイルはローカル スタイルによって上書きされます @import url("./static/fonts/iconfont.css");
	.box1{
		背景: ピンク;
	}
</スタイル>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。