当前位置: 首页 > news >正文

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

heml:

<text class="icon-check"></text>

 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进行转换)。

http://www.lryc.cn/news/161851.html

相关文章:

  • C/C++指针函数与函数指针
  • 30天入门Python(基础篇)——第1天:为什么选择Python
  • 智慧公厕破解公共厕所管理的“孤岛现象”
  • excel中删除重复项
  • 2023-9-8 求组合数(三)
  • 01 - Apache Seatunnel 源码调试
  • UVA-12325 宝箱 题解答案代码 算法竞赛入门经典第二版
  • 烟感报警器单片机方案开发,解决方案
  • 【JavaEE】_CSS引入方式与选择器
  • 【8】shader写入类中
  • Servlet注册迭代史
  • 合创汽车V09纵享商务丝滑?预售价32万元起,正式宣布大规模生产
  • 49. 视频热度问题
  • 【力扣练习题】加一
  • Linux--I/O复用之select
  • 数据结构大作业 成绩分析c语言程序设计
  • Consul学习笔记之-初识Consul
  • python实现读取并显示图片的两种方法
  • Spring Boot 整合 MyBatis
  • 2023高教社杯数学建模A题B题C题D题E题思路模型 国赛建模思路分享
  • 手机木马远程控制复现
  • linux 安装Docker
  • Java中的值传递与引用传递 含面试题
  • SQL中CONVERT()函数用法详解
  • 借助各大模型的优点生成原创视频(真人人声)Plus
  • 技能大赛物联网赛项参赛软件建设方案
  • 蓝桥杯官网练习题(凯撒加密)
  • JavaScript 数组中常用的方法
  • YOLOV7改进-添加基于注意力机制的目标检测头(DYHEAD)
  • 爬虫爬取mp3文件例子