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

css中的字体单位

news 2026/5/21 13:15:55

绝对长度单位

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

  • 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

强烈推荐！这款顶伯 工具拯救了我的日更视频账号

强烈推荐&#xff01;这款顶伯 TTS 工具拯救了我的日更视频账号做日更视频账号最痛苦的是什么&#xff1f;是配音。 以前我每天花两小时录音、降噪、剪辑&#xff0c;嗓子还经常哑。直到用了顶伯文字转语音工具&#xff0c;一切都变了。它基于微软 TTS 技术&#xff0c;音质自然…...

编程新知 2026/5/21 12:33:38

Vue SSR实战：如何用Express + Webpack-dev-middleware实现开发环境热更新与内存编译？

Vue SSR开发环境优化&#xff1a;Express与Webpack-dev-middleware深度整合指南 1. 为什么需要开发环境热更新&#xff1f; 在传统Vue SSR项目开发中&#xff0c;每次代码修改后都需要手动重启服务并刷新浏览器&#xff0c;这种开发体验对于中型以上项目来说效率极低。想象一…...

编程新知 2026/5/21 12:08:02

QCustomPlot交互秘籍：手把手实现数据点拾取、矩形框选与自定义高亮样式

QCustomPlot交互功能深度解析&#xff1a;从数据点拾取到视觉定制全攻略 1. 交互式数据可视化的核心价值 在现代数据可视化应用中&#xff0c;静态图表已经无法满足用户日益增长的交互需求。QCustomPlot作为Qt生态中功能强大的绘图库&#xff0c;其交互功能的设计既考虑了开发…...

编程新知 2026/5/21 10:43:41

VSCodium终极指南：零监控的VS Code开源替代方案

VSCodium终极指南&#xff1a;零监控的VS Code开源替代方案 【免费下载链接】vscodium binary releases of VS Code without MS branding/telemetry/licensing 项目地址: https://gitcode.com/gh_mirrors/vs/vscodium VSCodium是一款基于Visual Studio Code源代码构建的…...

编程新知 2026/5/21 9:35:05

Triton Ascend 代码生成 Skill

【免费下载链接】cannbot-skills CANNBot 是面向 CANN 开发的用于提升开发效率的系列智能体&#xff0c;本仓库为其提供可复用的 Skills 模块。 项目地址: https://gitcode.com/cann/cannbot-skills name: triton-op-coding description: > Triton Ascend 算子代码生…...

编程新知 2026/5/21 9:22:25

别再套table了！手把手教你用LaTeX的longtable搞定跨页表格（附字体调整避坑指南）

LaTeX长表格排版实战&#xff1a;从table到longtable的平滑迁移与字体优化 第一次在LaTeX中遇到需要跨页的表格时&#xff0c;我像大多数初学者一样&#xff0c;本能地在longtable外面套了一层table环境——结果表格不仅无法正确分页&#xff0c;还出现了各种诡异的格式错乱。经…...

编程新知 2026/5/21 8:16:03

工业物联网主板布局设计：从i.MX28x核心到无线模块的硬件规划

1. 项目概述&#xff1a;从一块板卡看工业物联网的“骨架”拿到一块名为“IoT-A28LI”的主板&#xff0c;标题里还带着“i.MX28x系列”和“无线工控板”这样的关键词&#xff0c;这立刻让我这个在工业控制和嵌入式领域摸爬滚打多年的老工程师来了兴致。这不仅仅是一块电路板&am…...

编程新知 2026/5/21 6:44:53

Python-json-logger集成指南：Django、Flask等框架中的终极使用教程

Python-json-logger集成指南&#xff1a;Django、Flask等框架中的终极使用教程 【免费下载链接】python-json-logger Json Formatter for the standard python logger 项目地址: https://gitcode.com/gh_mirrors/py/python-json-logger Python-json-logger是一个强大的J…...

编程新知 2026/5/21 4:53:36

深度解析Clarity AI超分辨率架构：从算法原理到实战优化指南

深度解析Clarity AI超分辨率架构&#xff1a;从算法原理到实战优化指南 【免费下载链接】clarity-upscaler Clarity AI | AI Image Upscaler & Enhancer - free and open-source Magnific Alternative 项目地址: https://gitcode.com/GitHub_Trending/cl/clarity-upscale…...

编程新知 2026/5/21 4:51:36

后悔没早装！iPhone装上这8个APP，生产力瞬间拉满

有了iPhone之后&#xff0c;很多人都会遇到同一个问题——软件商店里应用浩如烟海&#xff0c;到底哪些才是真正值得装的&#xff1f;有的软件看起来花里胡哨&#xff0c;装上后却很少打开&#xff1b;有的工具看似简单&#xff0c;用惯了才发现离不开了。作为一个从“有了它只…...

编程新知 2026/5/21 1:18:57