Explain the styles in uni app in detail

Summary of Styles in Catalog uni-app

Styles in uni-app

sass plug-in needs to be downloaded in official website, and you can follow the prompts rpx is responsive px, a dynamic unit that adapts to screen width. Based on a 750-wide screen, 750rpx is exactly the screen width. When the screen widens, the actual display effect of rpx will be enlarged by equal ratio. Use @import Statement to import an outreach style sheet, @import Followed by the relative path of the outreach style sheet to be imported, use; Indicates the end of the statement Styles defined in App. vue are global and work on every 1 page. Styles defined in the vue file in the pages directory are local styles that work only on the corresponding page and override the same selector in App. vue.

uni-app supports the use of font icons in the same way as ordinary web projects, with the following points to note:

If the font file is smaller than 40kb, uni-app will automatically convert it to base64 format;
The font file is greater than or equal to 40kb, which needs to be converted by the developer himself, otherwise it will not take effect;
It is recommended to use absolute paths beginning with ~ @ for reference paths of font files.

<template>
	<view>
		<view>
			 Style learning 
		</view>
		<view class="box1">
			 Test text 
			<text>123</text>
		</view>
		<view class="iconfont icon-shipin">
		</view>
	</view>
</template>
<script>
</script>
<style lang="scss">
	@import url("./a.css");// Imported an external css Documents 
	.box1{
		width: 350rpx; //rpx It can be used not only for boxes but also for words 
		height: 350rpx;
		background: red;
		font-size: 50rpx;
		color: #FFFFFF;
		text{
			color: pink;
		}
	}
</style>

Define common global styles in App. vue

<style>
	/* Public per page css */
	// Global style , Will be overwritten by local styles 
	@import url("./static/fonts/iconfont.css");
	.box1{
		background: pink;
	}
</style>

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!