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

css中的字体单位

news 2025/11/14 22:43:27

绝对长度单位

这些单位表示固定的物理尺寸，不会根据其他因素变化。

  • cm：厘米
  • mm：毫米
  • in：英寸（1in = 96px = 2.54cm）
  • px：像素（最常用的绝对单位，在屏幕上的表现取决于设备的分辨率）
  • pt：点（1pt = 1/72 of an inch）
  • pc：派卡（1pc = 12 pt）

相对长度单位

这些单位相对于某个元素或父元素的属性值，因此它们可以更灵活地适应不同的显示条件和用户设置。

  • em：相对于当前对象的字体大小。1em 等于当前元素的字体大小。如果未指定，则等于浏览器默认的字体大小。
  • rem：相对于根元素（HTML）的字体大小。1rem 等于 <html> 元素的字体大小。
  • ex：相对于当前对象的小写字母 "x" 的高度。
  • ch：相对于字符 "0" 的宽度。
  • vw：相对于视口宽度的百分比，1vw 等于视口宽度的1%。
  • vh：相对于视口高度的百分比，1vh 等于视口高度的1%。
  • vmin：相对于视口较小维度的百分比，即取 vw 和 vh 中较小的一个。
  • vmax：相对于视口较大维度的百分比，即取 vw 和 vh 中较大的一个。

百分比单位

  • %：相对于父元素的字体大小。例如，如果父元素的字体大小为16px，那么子元素使用font-size: 50%;将会是8px。

使用建议

  • 响应式设计：对于需要响应不同屏幕尺寸的设计，推荐使用相对单位如em, rem, vw, vh等，因为它们可以根据用户的屏幕大小和浏览器窗口自动调整。
  • 固定尺寸：如果你希望字体在所有设备上保持一致的视觉效果，可以考虑使用绝对单位如px或pt。
  • 可读性与可访问性：使用相对单位有助于提高网站的可读性和可访问性，因为它允许用户通过浏览器设置调整文本大小。

相关文章：

css中的字体单位

绝对长度单位 这些单位表示固定的物理尺寸&#xff0c;不会根据其他因素变化。 cm&#xff1a;厘米mm&#xff1a;毫米in&#xff1a;英寸&#xff08;1in 96px 2.54cm&#xff09;px&#xff1a;像素&#xff08;最常用的绝对单位&#xff0c;在屏幕上的表现取决于设备的分…...

编程日记 2024/12/16 23:55:24

如何使用程序查询域名whois信息？(带PHP/C#示例)

直接使用TCP协议向WHOIS服务器的43端口发送查询请求即可返回WHOIS信息。 一些国际域名(.COM/.NET/.CC等)需要继续向各注册商的WHOIS服务服务发送查询请求来获取详细信息。 大部分New gTLD来说&#xff0c;服务器是“whois.nic.[后缀]”&#xff0c;例如.red的WHOIS服务器为whoi…...

编程日记 2024/12/16 23:53:21

在C#中编程绘制和移动线段

这个示例允许用户绘制和移动线段。它允许您根据鼠标下方的内容执行三种不同的操作。 当鼠标位于某个线段上时&#xff0c;光标会变成手的形状。然后您可以单击并拖动来移动该线段。当鼠标位于线段的终点上时&#xff0c;光标会变成箭头。然后您可以单击并拖动以移动终点。当鼠…...

编程日记 2024/12/16 23:48:14

web自动化测试框架playwright

一、背景&#xff1a;UI自动化的痛点&#xff1a; 1、设计脚本耗时&#xff1a; 需要思考要如何模拟用户的操作&#xff0c;如何触发页面的事件&#xff0c;还要思考如何设计脚本&#xff0c;定位和操作要交互的元素、路径、位置&#xff0c;再编写代码逻辑&#xff0c;往复循…...

编程日记 2024/12/16 23:47:11

【报错记录】Ubuntu22.04解决开机卡在 /dev/sda5 : clean , *files , *blocks

一个愿意伫立在巨人肩膀上的农民...... 一、错误现象 本人的电脑安装Windows10和Ubuntu22.04双系统&#xff0c;一次训练中电脑死机无法开机&#xff0c;重启之后便出现如下错误&#xff0c;在网上寻找过很多方法均无效&#xff0c;在root下禁用了samba服务&#xff0c;也无济…...

编程日记 2024/12/16 23:45:08

【AIGC】如何高效使用ChatGPT挖掘AI最大潜能？26个Prompt提问秘诀帮你提升300%效率的！

还记得第一次使用ChatGPT时&#xff0c;那种既兴奋又困惑的心情吗&#xff1f;我是从一个对AI一知半解的普通用户&#xff0c;逐步成长为现在的“ChatGPT大神”。这一过程并非一蹴而就&#xff0c;而是通过不断的探索和实践&#xff0c;掌握了一系列高效使用的技巧。今天&#…...

编程日记 2024/12/16 23:40:02

免费生成AI PPT产品推荐？

要完全免费几乎是没有的&#xff0c;要知道AI还是非常烧钱的。 不过免费蹭还是有很多方法的&#xff0c;这里收集了一些&#xff1a; 下面分享我自己免费蹭过的几款AI制作PPT的工具。 1 金山-WPS PPT对我们来说并不陌生&#xff0c;而微软的PowerPoint与金山的WPS也是我们最常…...

编程日记 2024/12/16 23:39:02

ubuntu22.04 使用crash

文章目录 前言一、apt 安装dbgsym vnlinux二、使用.ddeb包安装dbgsym vnlinux三、dbgsym发行版四、crash调试参考资料 前言 最近在适配 ubuntu系统&#xff0c;记录一下其crash的安装。 一、apt 安装dbgsym vnlinux # echo "deb http://ddebs.ubuntu.com $(lsb_release…...

编程日记 2024/12/16 23:35:58

Linux高性能服务器编程 | 读书笔记 |9.定时器

9. 定时器 网络程序需要处理定时事件&#xff0c;如定期检测一个客户连接的活动状态。服务器程序通常管理着众多定时事件&#xff0c;有效地组织这些定时事件&#xff0c;使其在预期的时间被触发且不影响服务器的主要逻辑&#xff0c;对于服务器的性能有至关重要的影响。为此&…...

编程日记 2024/12/16 23:33:56

OSG开发笔记（三十九）：OSG中模型的透明度实现、球体透明度Demo

​若该文为原创文章&#xff0c;未经允许不得转载 本文章博客地址&#xff1a;https://blog.csdn.net/qq21497936/article/details/144424531 各位读者&#xff0c;知识无穷而人力有穷&#xff0c;要么改需求&#xff0c;要么找专业人士&#xff0c;要么自己研究 长沙红胖子Qt…...

编程日记 2024/12/16 23:30:53

phpSpider如何处理网页内容的动态加载问题

phpSpider处理网页内容的动态加载问题&#xff0c;主要采取以下几种策略&#xff1a; 一、分析并直接请求API 现代网站中&#xff0c;很多动态加载的内容是通过后端的API接口以JSON或XML等格式返回的。phpSpider可以通过分析网页的请求&#xff0c;找到这些API接口的URL&…...

编程日记 2024/12/16 23:28:50

【Go】-倒排索引的简单实现

目录 什么是倒排索引 定义 基本结构和原理 分词在倒排索引中的重要性 简单倒排索引的实现 接口定义 简单数据库的实现 倒排索引 正排索引 测试 总结 什么是倒排索引 定义 倒排索引&#xff08;Inverted Index&#xff09;是一种索引数据结构&#xff0c;它是文档检…...

编程日记 2024/12/16 23:27:47

Python：基于PyCharm的简单程序创建及运行-HelloWorld

1. 新建项目 2. 设置文件位置&#xff0c;并创建项目 文件位置由“目录项目名称”组成&#xff0c;如&#xff1a;D:\PycharmProjects\HelloWorld&#xff0c;“HelloWorld”则是项目名称。 3. 创建Python文件 4. 定义文件名称&#xff0c;如HelloWorld。双击【Python 文件】完…...

编程日记 2024/12/16 23:24:43

设置HP条UI

概述 设置常见的生命值条&#xff0c; 实现过程 设置UI/image作为形状 设置UI/Image作为背景 设置UI/image&#xff08;healthfill&#xff09;作为填充图片&#xff0c;层数低于背景 设置heathfill的imagetype为filled fillmethod为horizontal [SerializeField] private Im…...

编程日记 2024/12/16 23:20:39

开源分布式系统追踪-03-CNCF jaeger-02-快速开始

分布式跟踪系列 CAT cat monitor 分布式监控 CAT-是什么&#xff1f; cat monitor-02-分布式监控 CAT埋点 cat monitor-03-深度剖析开源分布式监控CAT cat monitor-04-cat 服务端部署实战 cat monitor-05-cat 客户端集成实战 cat monitor-06-cat 消息存储 skywalking …...

编程日记 2024/12/16 23:08:25

手机实时提取SIM卡打电话的信令声音--社会价值(一、方案解决了什么问题)

手机实时提取SIM卡打电话的信令声音 --社会价值(一、方案解决了什么问题) 一、前言 这段时间&#xff0c;我们在技术范围之外陷入了一个自证或者说下定义的怪圈&#xff0c;即要怎么样去介绍或者描述&#xff1a;我们是一个什么样的产品。它在当前这个世界上&#xff0c;处于…...

编程日记 2024/12/16 23:06:24

FFmpeg功能使用

步骤&#xff1a;1&#xff0c;安装FFmpeg Download FFmpeg 在这里点击->Windows builds from gyan.dev&#xff1b;如下图 会跳到另外的下载界面&#xff1a; 在里面下拉选择点击ffmpeg-7.1-essentials_build.zip&#xff1a; 即可下载到FFmpeg&#xff1b; 使用&#…...

编程日记 2024/12/16 23:05:22

Windows安装WSL子系统及docker，以及WSL和docker配置、使用及问题解决

在Windows操作系统中，Ubuntu子系统（也称为Windows Subsystem for Linux, WSL）为开发者提供了一个在Windows环境下运行Linux环境的平台。然而，有时用户在按照Ubuntu子系统或者使用WSL时，可能会遇到各种问题，下面总结一下解决方式。 想要在Windows上安装Docker（实际上是基…...

编程日记 2024/12/16 23:03:18

飞牛 fnos docker镜像部署OpenSpeedtest宽带网速测试教程

penSpeedTest是一个跨平台的网络测速应用&#xff0c;支持不同操作系统的浏览器&#xff0c;无需安装额外软件或插件。您可以在iPhone、iPad、Android设备、Windows和Linux系统的电脑、手机和平板上直接测试设备与NAS之间的宽带速度。 通过这个可以排查出设备与NAS之间的传输速…...

编程日记 2024/12/16 23:01:16

【kubernetes】资源管理方式

目录 1. 说明2. 命令式对象管理3. 命令式对象配置4. 声明式对象配置5. 三种方式的对比 1. 说明 1.在Kubernetes&#xff08;k8s&#xff09;中&#xff0c;资源管理是一个核心功能&#xff0c;它允许用户通过操作资源来管理Kubernetes集群。2.Kubernetes将所有的内容都抽象为资…...

编程日记 2024/12/16 22:59:14

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/11/8 5:09:38

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/11/11 1:56:04

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/11/7 18:51:31

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/11/7 15:18:11

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/10/24 5:00:32

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34