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

css中的字体单位

绝对长度单位

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

  • 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。

使用建议

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

相关文章:

  • 如何使用程序查询域名whois信息?(带PHP/C#示例)
  • 在C#中编程绘制和移动线段
  • web自动化测试框架playwright
  • 【报错记录】Ubuntu22.04解决开机卡在 /dev/sda5 : clean , *files , *blocks
  • 【AIGC】如何高效使用ChatGPT挖掘AI最大潜能?26个Prompt提问秘诀帮你提升300%效率的!
  • 免费生成AI PPT产品推荐?
  • ubuntu22.04 使用crash
  • Linux高性能服务器编程 | 读书笔记 |9.定时器
  • OSG开发笔记(三十九):OSG中模型的透明度实现、球体透明度Demo
  • phpSpider如何处理网页内容的动态加载问题
  • 【Go】-倒排索引的简单实现
  • Python:基于PyCharm的简单程序创建及运行-HelloWorld
  • 设置HP条UI
  • 开源分布式系统追踪-03-CNCF jaeger-02-快速开始
  • 手机实时提取SIM卡打电话的信令声音--社会价值(一、方案解决了什么问题)
  • FFmpeg功能使用
  • Windows安装WSL子系统及docker,以及WSL和docker配置、使用及问题解决
  • 飞牛 fnos docker镜像部署OpenSpeedtest宽带网速测试教程
  • 【kubernetes】资源管理方式
  • chromedriver可运行的docker环境
  • 【YashanDB知识库】如何将mysql含有group by的SQL转换成崖山支持的SQL
  • 希迪智驾持续亏损8.2亿:毛利率下滑,冲刺“自动驾驶矿卡第一股”
  • 部署GitLab服务器
  • 利用cnocr库完成中文扫描pdf文件的文字识别
  • pythonselenium自动化初始配置
  • 【C++】数的性质问题分析与优化
  • ASP.NET Core WebAPI中使用Jwt实现鉴权授权-System.IdentityModel.Tokens.Jwt
  • 【iOS】OC高级编程 iOS多线程与内存管理阅读笔记——自动引用计数(四)
  • 嵌入式软考学习笔记(1)超详细!!!
  • 【数据分享】2013-2023年我国省市县三级的逐年CO数据(免费获取\excel\shp格式)