uni-app style scss and font icons

uni-app style scss and font icons

• Note: selectors in uni-app have id, class, tags, etc., but there is no * selector
• The page tag is similar to the body

uni-app style rpx

• rpx is responsive px,
  • A dynamic unit that adapts to the screen width. Based on a 750-wide screen, 750rpx is exactly the width of the screen. When the screen becomes wider, the actual display effect of rpx will be proportionally enlarged, but when the screen width of the App (vue2 does not contain nvue) and H5 (vue2) side reaches 960px, the default will be calculated according to the screen width of 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>

• Effect
  

Import Outline Style Sheets

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>

• Effect
  

uni-app font icon

• Font icons are used in uni-app in the same way as ordinary web projects, with the following points of attention
• be careful:
  • The font file size is less than 40kb, uni-app will automatically convert to base64
  • The size of the font file is equal to or equal to 40kb, and the developer needs to convert it by himself, otherwise the use will not take effect.
  • The reference path of the font file, it is recommended to use an absolute path starting with ~@

download font icon

• icon official website
• Among the selected font icons, select Download
• The effect after decompression
  

Copy the corresponding font library to the font file directory under the static file

• The things directly in the static / font file are:
  • iconfont.css
  • iconfont.ttf
  • iconfont.woff
  • iconfont.woff2
  • related documents
• be careful:
  • It is the path of the font icon that needs to be modified. In the iconfont.cssfile
  • Originallysrc: url('iconfont.woff2?t=1649157888662') format('woff2'),
  • Now, it is changed to: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');
}

Use in App, load global

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

Use font icons

• Note: Generally, the downloaded font icons contain the index.html file. Double-click the index.html file to see the corresponding font icon in the browser.
  

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

• Effect
  

uni-app uses scss etc.

• Download scss - from tools, check plugin installation - go to plugin market to install (install new plugin) -
• Plugin Market Links
• After searching, install it
• Then click Import plugin using hbuilder