uni-app中樣式是怎么樣的

小編給大家分享一下uni-app中樣式是怎么樣的，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

uni-app中的樣式

• sass插件需要在官網(wǎng)下載，按提示操作即可

• rpx 即響應式px，一種根據(jù)屏幕寬度自適應的動態(tài)單位。以750寬的屏幕為基準，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實際顯示效果會等比放大。

• 使用@import語句可以導入外聯(lián)樣式表，@import后跟需要導入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束

• 定義在 App.vue 中的樣式為全局樣式，作用于每一個頁面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 App.vue 中相同的選擇器。

uni-app 支持使用字體圖標，使用方式與普通 web 項目相同，需要注意以下幾點：

• 字體文件小于 40kb，uni-app 會自動將其轉(zhuǎn)化為 base64 格式；
  

• 字體文件大于等于 40kb， 需開發(fā)者自己轉(zhuǎn)換，否則使用將不生效；
  

• 字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑。

<template>
	<view>
		<view>
			樣式學習
		</view>
		<view class="box1">
			測試文字
			<text>123</text>
		</view>
		<view class="iconfont icon-shipin">
		</view>
	</view>
</template>
<script>
</script>
<style lang="scss">
	@import url("./a.css");//導入了外部的css文件
	.box1{
		width: 350rpx; //rpx不僅可以給盒子使用還可以給文字使用
		height: 350rpx;
		background: red;
		font-size: 50rpx;
		color: #FFFFFF;
		text{
			color: pink;
		}
	}
</style>

在App.vue里面定義公共的全局樣式

<style>
	/*每個頁面公共css */
	//全局樣式,會被局部樣式覆蓋掉
	@import url("./static/fonts/iconfont.css");
	.box1{
		background: pink;
	}
</style>

看完了這篇文章，相信你對“uni-app中樣式是怎么樣的”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！