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

css中的字体单位

news 2026/1/2 11:16:36

绝对长度单位

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

  • 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

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/1 5:21:19

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2025/12/31 7:46:03

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/12/31 13:00:11

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2026/1/1 20:10:54

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/12/31 16:15:08