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

html:

<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.rhkb.cn/news/135203.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

驱动开发,IO多路复用(select,poll,epoll三种实现方式的比较)

1.IO多路复用介绍 在使用单进程或单线程情况下&#xff0c;同时处理多个输入输出请求&#xff0c;需要用到IO多路复用&#xff1b;IO多路复用有select/poll/epoll三种实现方式&#xff1b;由于不需要创建新的进程和线程&#xff0c;减少了系统资源的开销&#xff0c;减少了上下…

1. 快速体验 VSCode 和 CMake 创建 C/C++项目

1. 快速体验 VSCode 和 CMake 创建 C/C项目 本章的全部代码和markdown文件地址: CMake_Tutorial&#xff0c;欢迎互相交流. 此次介绍的内容都是针对于 Linux 操作系统上的开发过程. 1.1 安装开发工具 VSCode: 自行下载安装, 然后安装插件 Cmake:在 Ubuntu 系统上, 可以采用 ap…

Ae 效果:CC Hair

模拟/CC Hair Simulation/CC Hair CC Hair&#xff08;CC 毛发&#xff09;可以在源图像上模拟生成毛发、绒线等&#xff0c;并可调整它们的长度、方向、重量等属性&#xff0c;从而创建出非常独特的效果。 CC Hair 本质上是基于 Alpha 通道来生成毛发&#xff0c;无毛发处将变…

Debian 12安装Docker

1.更新系统包 #apt update 2.安装依赖包 #apt install apt-transport-https ca-certificates curl gnupg lsb-release 3.添加Docker源 &#xff08;1&#xff09;添加Docker 官方GPG密钥 #curl -fsSL https://download.docker.com/linux/debian/gpg | gpg --dearmor -o /usr/s…

GraphQL基础知识与Spring for GraphQL使用教程

文章目录 1、数据类型1.1、标量类型1.2. 高级数据类型 基本操作2、Spring for GraphQL实例2.1、项目目录2.2、数据库表2.3、GraphQL的schema.graphql2.4、Java代码 3、运行效果3.1、添加用户3.2、添加日志3.3、查询所有日志3.4、查询指定用户日志3.5、数据订阅 4、总结 GraphQL…

基于LUT查找表方法的图像gamma校正算法FPGA实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 将gamma2.2和gamma1/2.2的数据分别导入到matlab进行对比&#xff1a; 2.算法运行软件版本 matlab2022a 3.部分核心程序 timescale 1ns / 1ps //…

C2基础设施威胁情报对抗策略

威胁情报是指在信息安全和安全防御领域&#xff0c;收集、分析和解释与潜在威胁相关的信息&#xff0c;以便预先发现并评估可能对组织资产造成损害的潜在威胁&#xff0c;是一种多维度、综合性的方法&#xff0c;其通过信息的收集、分析和研判&#xff0c;帮助组织了解可能对其…

Vue.js vs React:哪一个更适合你的项目?

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

小谈设计模式(2)—简单工厂模式

小谈设计模式&#xff08;2&#xff09;—简单工厂模式 专栏介绍专栏地址专栏介绍 简单工厂模式简单工厂模式组成抽象产品&#xff08;Abstract Product&#xff09;具体产品&#xff08;Concrete Product&#xff09;简单工厂&#xff08;Simple Factory&#xff09;三者关系 …

【MySQL】MySQL索引的定义、分类、Explain、索引失效和优化

索引的介绍 索引是帮助MySQL高效获取数据的数据结构 MySQL在存储数据之外&#xff0c;数据库系统中还维护着满足特定查找算法的数据结构&#xff0c;这些数据结构以某种引用(指向)表中的数据&#xff0c;这样我们就可以通过数据结构上实现的高级查找算法来快速找到我们想要的数…

JSP 学习笔记(基础)

出现背景&#xff1a; 由于 Servlet 输出 HTML 比较困难&#xff0c;所以出现了 JSP 这个代替品。 特点&#xff1a; 基于文本&#xff0c;HTML 和 Java 代码共同存在&#xff08;用 write() 来写 HTML 标签&#xff09;其本身就是个被封装后的 Servlet&#xff08;被编译为…

springboot对接postgres

安装postgres 注意:下述链接方式会自动创建数据库steven_russell,若需要创建其他数据库&#xff0c;可以手动执行命令创建数据库 docker run --name postgres \ -p 5432:5432 \ -e POSTGRES_USERsteven_russell \ -e POSTGRES_PASSWORD123456 \ -itd --privilegedtrue postgre…

D数树,牛客小白月赛78,思维

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 “开导&#xff01;” 众所周知&#…

BGP路由属性

任何一条BGP路由都拥有多个路径属性&#xff08;Path Attributes&#xff09;&#xff0c;当路由器通告BGP路由给它的对等体时&#xff0c;该路由将会携带多个路径属性&#xff0c;这些属性描述了BGP路由的各项特征&#xff0c;同时在某些场景下也会影响BGP路由优选的决策。 一…

【Flink】FlinkCDC获取mysql数据时间类型差8小时时区解决方案

1、背景: 在我们使用FlinkCDC采集mysql数据的时候,日期类型是我们很常见的类型,但是FlinkCDC读取出来会和数据库的日期时间不一致,情况如下 FlinkCDC获取的数据中create_time字段1694597238000转换为时间戳2023-09-13 17:27:18 而数据库中原始数据如下,并没有到下午5点…

01.qtcreator介绍

四、创建第一个qtcreator项目并确定文件和目录的作用 bin: 存放编译好输出的dll文件和执行文件 doc: 存放文档 lib: 存放库文件 src: 存放源码 注意&#xff1a; QtCreator创建路径不要使用中文路径&#xff1b;创建.h和.cpp文件时&#xff0c;使用小写&#xff1b;windows大…

解读|美创深度参与5项电信和互联网行业数据安全标准发布实施

《数据安全法》、《个人信息保护法》等法律法规的颁布实施&#xff0c;坚持安全和发展并重的原则&#xff0c;积极应对复杂严峻的安全风险与挑战&#xff0c;加速构建数据安全保障体系&#xff0c;成为电信和互联网行业重要工作。 “安全发展、标准先行”&#xff0c;标准化工作…

一文详解TCP三次握手四次挥手

文章目录 TCP的三次握手和四次挥手三次握手四次挥手 TCP的三次握手和四次挥手 基本概念 SYN&#xff08;Synchronize Sequence Numbers&#xff0c;同步序列数字&#xff09;&#xff1a;用于建立连接的同步信号。 SYN 序列号的作用是用于标识每个数据包中的字节流的起始位置。…

线上论坛之单元测试

对线上论坛进行单元测试的测试报告 源码地址&#xff1a;https://gitee.com/coisini-thirty-three/forum 一、用户部分&#xff08;UserServiceImplTest&#xff09; 1.创建普通用户 测试名称 createNormalUser() 测试源码 Test void createNormalUser() { // 构造用户 User …

指针和数组笔试题解析

大家好&#xff0c;我们今天来学习有关于指针和数组的笔试题解析。 在之前的C语言学习中我们知道了数组名代表的是数组首元素的地址&#xff0c;而有两个例外&#xff0c;就是sizeof中和&符操作取的就是整个数组的地址&#xff0c;那么我们今天的学习重点就是这些关于数组…