利用transform和border 创造简易图标,以适应uniapp中多字体大小情况下的符号问题

heml:

 css:

	.icon-check {
		border: 2px solid black;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		transform: rotate(45deg);
	}

实际上就是声明一个带边框的div 将其中相邻的两边去掉再通过设置两边的边长差来改变夹角,比较适合用来显示对钩符号。

因为uni-app的page-meta再加上插件postcss-px-to-viewport插件可以将页面中的px/rpx进行大小动态设置,此处的px就可以随着全局变量中的字体大小一起进行变化,当想设计一个大小不随着全局变量变化的符号时将其换成rpx即可(postcss-px-to-viewport配置文件中可以生命将px进行转换还是将rpx进行转换)。

你可能感兴趣的:(css,html,前端,uni-app)