Detailed explanation of styles in uni-app

Styles in uni-app

• The sass plug-in needs to be downloaded from the official website and just follow the prompts
• rpx stands for responsive px, a dynamic unit that adapts to the screen width. Taking a 750-width screen as a benchmark, 750rpx is exactly the screen width. As the screen becomes wider, the actual display effect of rpx will be enlarged proportionally.
• Use the @import statement to import an external style sheet. @import is followed by the relative path of the external style sheet to be imported, and ; indicates the end of the statement.
• The styles defined in App.vue are global styles and apply to every page. The styles defined in the vue file under the pages directory are local styles, which only apply to the corresponding pages and will override the same selector in App.vue.

uni-app supports the use of font icons. The usage is the same as that of ordinary web projects. Please note the following points :

• 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, and the developer needs to convert it by himself, otherwise it will not be effective;
  
• It is recommended to use an absolute path starting with ~@ for the reference path of the font file.

<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 external CSS file .box1{
		width: 350rpx; //rpx can be used not only for boxes but also for text height: 350rpx;
		background: red;
		font-size: 50rpx;
		color: #FFFFFF;
		text{
			color: pink;
		}
	}
</style>

Define common global styles in App.vue

<style>
	/*Common CSS for each page */
	//Global style will be overwritten by local style @import url("./static/fonts/iconfont.css");
	.box1{
		background: pink;
	}
</style>

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!