詳解uni-app中的樣式

Posted on by

uni-app中的樣式

  • sass插件需要在官網下載，按提示操作即可
  • rpx 即響應式px，一種根據屏幕寬度自適應的動態單位。以750寬的屏幕為基準，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實際顯示效果會等比放大。
  • 使用@import語句可以導入外聯樣式表，@import後跟需要導入的外聯樣式表的相對路徑，用;表示語句結束
  • 定義在 App.vue 中的樣式為全局樣式，作用於每一個頁面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，隻作用在對應的頁面，並會覆蓋 App.vue 中相同的選擇器。

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

  • 字體文件小於 40kb，uni-app 會自動將其轉化為 base64 格式；
  • 字體文件大於等於 40kb， 需開發者自己轉換，否則使用將不生效；
  • 字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑。
<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>

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：