ユニアプリスタイルのscssとフォントアイコン

ユニアプリスタイルのscssとフォントアイコン

• 注：uni-appのセレクターには、ID、クラス、タグなどがありますが、*セレクターはありません
• ページタグは本文に似ています

ユニアプリスタイルのrpx

• rpxはレスポンシブpxであり、
  • 画面幅に適応するダイナミックユニット。750ワイドスクリーンに基づくと、750rpxはまさにスクリーンの幅です。画面が広くなると、rpxの実際の表示効果は比例して拡大しますが、アプリ（vue2にはnvueが含まれていません）とH5（vue2）側の画面幅が960pxに達すると、デフォルトは画面に応じて計算されます375pxの幅。

<template>
	<view>
	<view class="box1">
		我是box1
	</view>
	<view class="box2">
		我是box2
	</view>
	</view>
</template>

<style>
	.box1 {
    
    
		width: 750rpx;
		height: 750rpx;
		background: pink;
	}
	.box2 {
    
    
		width: 375rpx;
		height: 375rpx;
		background: yellow;
		font-size: 30rpx;
	}
</style>

• 効果
  

アウトラインスタイルシートのインポート

base.css

.box3 {
    
     
	width: 200rpx;
	height: 200rpx;
	background: #007AFF;
}

detail.vue

<template>
	<view>
	<view class="box3">
		我是box3
	</view>
	</view>
</template>

<style>
	@import url("./css/base.css");
</style>

• 効果
  

ユニアプリフォントアイコン

• フォントアイコンは、通常のWebプロジェクトと同じようにユニアプリで使用されますが、次の点に注意してください。
• 気をつけて：
  • フォントファイルのサイズは40kb未満で、uni-appは自動的にbase64に変換されます
  • フォントファイルのサイズは40kb以上であり、開発者が変換する必要があります。変換しないと、使用が有効になりません。
  • フォントファイルの参照パス。〜@で始まる絶対パスを使用することをお勧めします。

フォントアイコンをダウンロード

• アイコン公式サイト
• 選択したフォントアイコンの中から、[ダウンロード]を選択します
• 減圧後の効果
  

対応するフォントライブラリを静的ファイルの下のフォントファイルディレクトリにコピーします

• static/fontファイルに直接含まれるものは次のとおりです。
  • iconfont.css
  • iconfont.ttf
  • iconfont.woff
  • iconfont.woff2
  • 関連資料
• 気をつけて：
  • 変更が必要なフォントアイコンのパスです。iconfont.cssファイル内
  • 元はsrc: url('iconfont.woff2?t=1649157888662') format('woff2'),
  • 現在、次のように変更されています。src: url('~@/static/font/iconfont.woff2?t=1649157888662') format('woff2'),

@font-face {
    
    
  font-family: "iconfont"; /* Project id 2160051 */
  src: url('~@/static/font/iconfont.woff2?t=1649157888662') format('woff2'),
       url('~@/static/font/iconfont.woff?t=1649157888662') format('woff'),
       url('~@/static/font/iconfont.ttf?t=1649157888662') format('truetype');
}

アプリで使用し、グローバルにロード

<style>
	/*每个页面公共css */
	@import url("./static/font/iconfont.css");
</style>

フォントアイコンを使用する

• 注：通常、ダウンロードされたフォントアイコンにはindex.htmlファイルが含まれています。index.htmlファイルをダブルクリックして、対応するフォントアイコンをブラウザに表示します。
  

<view class="iconfont icon-fanhui"></view>

• 効果
  

uni-appはscssなどを使用します。

• scssをダウンロードします-ツールから、プラグインのインストールを確認します-プラグインマーケットにアクセスしてインストールします（新しいプラグインをインストールします）-
• プラグインマーケットリンク
• 検索後、インストールしてください
• 次に、hbuilderを使用してプラグインをインポートをクリックします