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

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 のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • uniapp 要素ノードスタイルの動的変更の詳細な説明
  • uniappとvueの違いの詳細な説明
  • uniappの無痛トークンリフレッシュ方法の詳細な説明
  • uniappのグローバル変数実装の詳細な説明

<<:  企業サイトとコラム辞典 中国語と英語の比較 中国語と英語のバイリンガル企業サイトを作る仲間は

>>:  HTML ベースタグ target=_parent の使用の紹介

推薦する

Dockerカスタムブリッジdocker0とdockerのコマンド操作の開始、終了、再起動

質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...

Vue はシェイク機能を実装します (ios13.3 以降と互換性があります)

最近、shake.jsを使用して、shakeに似た機能を作成しました。ただし、shake機能はios...

Linux でシェル スクリプトを使用して jar パッケージ プロジェクトを展開するための完全な手順

1. JDKをインストールする コンピュータの動作桁を確認します。 uname -ar 2017 x...

HTML に CSS を導入するいくつかの方法の紹介

目次1. HTMLタグ要素にCSSスタイルを直接埋め込む2. HTMLのheadセクションにおけるス...

...

Easyswoole ワンクリック インストール スクリプトとパゴダ インストール エラー

よくある質問easyswoole を初めて使用する場合は、次のような問題に遭遇することがよくあります...

JavaScript のプロトタイプとプロトタイプチェーンの詳細な説明

目次プロトタイプチェーン図プロトタイピングに必須の知識プロトタイププロパティ（プロトタイプを表示） ...

ショッピングカートのスライド削除効果を実装するReactネイティブサンプルコード

基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-na...

Vue で親子コンポーネントの値を双方向バインドするために v-model を使用するときに発生する問題と解決策

目次シナリオ解決してみる解決するシナリオ今日、コンポーネントの双方向データバインディングにv-mod...

JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)

序文JS に触れるすべての開発者は、必然的に for ループを扱うことになります。結局のところ、fo...

Vue における $router と $route の違いの詳細な説明

通常、vue プロジェクトではルーティングを使用します。vue-router は vue.js の公...

element.style インライン スタイルを変更する方法のチュートリアル

序文上記の Web ページ スタイルを記述しているときに、スタイルの値をどのように変更しても、ページ...

MySQL 8 の新機能: 非表示のインデックス

背景インデックスは諸刃の剣です。クエリ速度は向上しますが、DML 操作も遅くなります。結局のところ、...

Ubuntu20.04 VNCのインストールと設定の実装

VNC はリモート デスクトップ プロトコルです。 VNC を使用して Ubuntu 20.04 を...

Linux システムで crontab を使用して MySQL データベースを定期的にバックアップする方法

システムの crontab を使用して定期的にバックアップ ファイルを実行し、バックアップ結果を日付...