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

css中的字体单位

news 2026/4/3 6:22:30

绝对长度单位

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

  • 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

Claude Code 宠物彩蛋来袭：/buddy 完整玩法指南（整理了宠物刷取方法，重置并刷到你想要的宠物）

文章目录 📖 介绍 📖 🏡 演示环境 🏡 📒 Claude Code /buddy 宠物指南 📒 📝 初识 Buddy 🎯 原理解析 🎯 预热窗口期 📝 如何触发 Buddy 🐙 18种宠物图鉴：你的伙伴是哪一位 📝 稀有度系统：1%传说级的诱惑 📝 五维属性：你的宠物是什么性格 📝 成…...

编程新知 2026/4/3 5:54:59

月销20万美金！户外“神器”领跑全球爆单季，跨境卖家如何靠本地化内容突围？

随着北半球天气回暖&#xff0c;全球“户外露营”热潮正以前所未有的速度升温。根据最新行业数据显示&#xff0c;谷歌趋势中“outdoor camping”&#xff08;户外露营&#xff09;的搜索热度自3月起便持续攀升&#xff0c;维持在“22-100”的高位区间。 对于跨境卖家而言&…...

编程新知 2026/4/3 5:34:33

十分钟微调Qwen2.5-7B实战：效果立现，适合新手的完整教程

十分钟微调Qwen2.5-7B实战&#xff1a;效果立现&#xff0c;适合新手的完整教程 1. 准备工作与环境介绍 1.1 为什么选择Qwen2.5-7B进行微调 Qwen2.5-7B是阿里云推出的开源大语言模型&#xff0c;7B参数规模在单卡上就能流畅运行。相比全量微调&#xff0c;使用LoRA技术可以在…...

编程新知 2026/4/3 5:16:11

ACUITY IMAGING 070-200000控制器模块

ACUITY IMAGING 070-200000 控制 / 模拟模块ACUITY IMAGING 070-200000 是美国 ACUITY IMAGING 公司出品的工业级高精度信号处理与控制模块&#xff0c;主要用于机器视觉、自动化检测及精密成像系统&#xff0c;负责信号采集、逻辑控制与数据传输&#xff0c;是工业视觉系统的核…...

编程新知 2026/4/3 5:08:07

Windows 11上保姆级教程：用Ollama本地部署DeepSeek-R1 8B，再也不用担心API费用和网络延迟了

Windows 11本地AI部署实战&#xff1a;OllamaDeepSeek-R1 8B全流程指南 在AI技术快速发展的今天&#xff0c;越来越多的开发者和中小企业开始关注如何在本地环境中部署和运行大型语言模型。对于预算有限但对数据隐私有高要求的团队来说&#xff0c;本地部署不仅能显著降低成本&…...

编程新知 2026/4/3 2:46:15

Transformer 原理与实现（二）：从代码看透 Transformer

在上一篇文章 [Transformer 原理与实现&#xff08;一&#xff09;&#xff1a;从 Attention 到编码解码机制](https://blog.csdn.net/Cha0DD/article/details/159753362) 中&#xff0c;我们从概念层面深入理解了 Transformer 的核心机制。 今天&#xff0c;我们将通过实际的…...

编程新知 2026/4/3 2:42:10

PyTorch版本升级踩坑实录：从1.10.0到1.10.1为何导致CUDA不兼容？

PyTorch小版本升级的隐秘陷阱&#xff1a;CUDA兼容性深度解析与实战解决方案 当你满怀期待地执行pip install --upgrade torch命令&#xff0c;将PyTorch从1.10.0升级到1.10.1时&#xff0c;可能不会想到这个看似无害的小版本更新会让你的GPU突然"罢工"。这不是个例…...

编程新知 2026/4/3 2:09:35

OpenClaw故障排除手册：千问3.5-9B连接问题大全

OpenClaw故障排除手册&#xff1a;千问3.5-9B连接问题大全 1. 开篇&#xff1a;为什么需要这份手册&#xff1f; 上周我在本地部署OpenClaw对接千问3.5-9B模型时&#xff0c;连续遇到了三个诡异的连接错误。每次报错都像在玩解谜游戏——错误信息含糊不清&#xff0c;社区讨论…...

编程新知 2026/4/3 0:38:31

NineData SQL AI 智能补全上线：写 SQL，不必每次都从头敲

写 SQL 的人&#xff0c;大概都遇到过这种情况&#xff1a; 明明脑子里已经知道要查什么&#xff0c;但真正开始写的时候&#xff0c;还是得一点点补关键字、补表名、补字段、补语句结构。越是多表查询、长 SQL、复杂条件&#xff0c;越容易写得慢、改得烦&#xff0c;还容易漏…...

编程新知 2026/4/2 23:57:57

Phi-4-Reasoning-Vision基础操作：图片预览、参数调整、结果复制与导出功能

Phi-4-Reasoning-Vision基础操作&#xff1a;图片预览、参数调整、结果复制与导出功能 1. 工具概览 Phi-4-Reasoning-Vision是一款基于微软Phi-4-reasoning-vision-15B多模态大模型开发的高性能推理工具。它专为双卡4090环境优化&#xff0c;通过Streamlit搭建了直观的宽屏交…...

编程新知 2026/4/2 20:42:17