html 字体大小em,px，em，rem该选择哪个？css相对字体大小的详细介绍-程序员宅基地

技术标签： html 字体大小em

网页设计中最大的混淆之一是由font-size属性引起的。最常用的字体大小是像素(px)，em和rem。

首先，我们将重点关注字体大小属性。

在CSS中，可以使用多个单元(例如像素，em和rem)，这通常会导致设计人员额外头痛。在本文中，我们将详细介绍这些单位的用法和任何误解。

PX单位

最常见和最受欢迎的单位是像素(px)。大多数人开始使用像素(px)单元，因为它使您可以完全控制文本大小。如果未指定字体大小，则普通文本的默认大小(如段落)为16px。

使用像素(px)单元的主要问题是，与em或rem单元不同，它们不可扩展，并且在不同屏幕尺寸上改变字体大小可能具有挑战性。

此外，像素(px)单元与任何东西都无关。因此，如果要根据屏幕大小更改整个页面的大小，则必须单独更改每个元素的字体大小。

EM单位

em单位是一个可扩展的字号单位。它与父容器的字体大小有关。一个em(1em)等于当前的字体大小。因此，例如，如果父元素的字体大小为16px而不是1em等于16px，则2em等于32px，依此类推......

如果使用em单位而不是px，使设计响应变得更容易。

但是，有一件事需要照顾。使用em单元时，应该小心嵌套。

例如，假设您创建了一个部分并将其字体大小设置为2em，现在，您要在字体大小为1em的部分中添加一个段落。段落的字体大小与该部分的字体大小有关。如果嵌套继续，或者如果它在项目的多个部分上使用，你可能会就会忽略它并完全丢失。

现在我们已经了解了em单位，现在是我们引入rem单元的最佳时机。

REM单位

rem单位是另一种可缩放的字体大小，但与em单位不同，它与根元素(HTML)而不是父元素相关。这就是rem单位得名的地方(root em = rem)。

这意味着，如果在元素上使用rem单位，只需调整根字体大小即可快速更改整个项目的字体大小。这种方式快速，简单，并且避免了使用em单元时可能遇到的任何嵌套复杂问题。

那么，你应该使用哪个单位？

回答这个问题的最好方法是使用一个例子。

首先，我们将使用px单位。html { font-size: 100% } //usually this equals to 16px

div { Font-size: 16px; }

div>p { font-size: 14px; }

效果如下：

在这里，您可以注意到每个元素的字体大小都是以像素(px)为单位设置的，它们之间没有任何关系。

接下来，我们将em单位用于相同的代码段。html { font-size: 100% }

div { Font-size: 0.875em; } //this equals to 14px

div>p { font-size: 2em; } // this equals to 28px

效果如下：

在此示例中，px和em单位之间的差异很明显。em单位的相对性很明显。只需更改容器div的字体大小，我们就可以看到段落字体大小相应更新。

最后，使用rem单位。html { font-size: 100% }

div { Font-size: 1rem; } //this equals to 16px

div>p { font-size: 1.5rem; } // this equals to 24px

效果如下：

使用rem单位时，很明显所有字体大小都与根字体大小有关。div和段落字体大小都与根相关，尽管div是段落的父级。

总结

没有正确或错误的单位。这一切都取决于您的技能水平，项目类型和规模以及个人喜好。

如果您想完全控制字体大小，则像素单位适合您。如果您在操作网页时希望获得更多的灵活性，那么em或rem单元是最佳选择。无论哪种方式，当完全理解单位时，将获得最佳结果。

本文链接：https://blog.csdn.net/weixin_39560604/article/details/117866609

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

ffmpeg音视频处理流程核心技术_视频效果演示系统的核心技术-程序员宅基地

文章浏览阅读712次。视频播放器原理什么是ffmpeg? ffmpeg 音视频编/解码流程图 ffmpeg 常用 struct AVFormatContext AVStream AVCodecContext AVCodec AVPacket AVFrame ffmpeg 常用Api av_register_all() avformat_alloc_output_context2() avio_open()..._视频效果演示系统的核心技术

Java List集合多种情况处理方法_java list reduce-程序员宅基地

文章浏览阅读449次。Java List集合多种情况处理方法：List集合交集、并集、差集、去重、与数组互转、删除、排序等操作_java list reduce

【UML】软件需求说明书_uml需求文档访客管家-程序员宅基地

文章浏览阅读2.3k次，点赞77次，收藏80次。需求：指人对客观事务需要的表现，体现为愿望、意向和兴趣，因而成为行动的一种直接原因。软件需求（IEEE软件工程标准词汇表）：（1）用户解决问题或达到目标所需的条件或能力。（2）系统或系统部件要满足合同、标准、规范或者其他正式规定文档所需具有条件或能力。（3）对（1）或（2）中的一个条件或一种能力的一种文档化表述。用例：定义 1 用例是对一个活动者使用一个系统的一项功能时进行交互过程中的一个文字描述序列。_uml需求文档访客管家

linux笔记-根文件系统及文件管理命令详解_根文件系统文本登陆-程序员宅基地

文章浏览阅读574次。第三章、Linux根文件系统及文件管理命令详解02_03_Linux根文件系统详解文件系统：rootfs: 根文件系统 FHS：Filesystem Hierarchy Standard（文件系统目录标准）的缩写，多数Linux版本采用这种文件组织形式，类似于Windows操作系统中c盘的文件目录，FHS采用树形结构组织文件。FHS定_根文件系统文本登陆

马克 · 扎克伯格期望的元宇宙到底会是什么样子？_马克扎克伯格博客-程序员宅基地

文章浏览阅读358次。马克 · 扎克伯格期望的元宇宙到底会是什么样子？_马克扎克伯格博客

使用Python开发游戏运行脚本（二）实现模拟点击_大漠窗口绑定成功按键-程序员宅基地

文章浏览阅读1.4w次，点赞8次，收藏78次。本文接上一篇文章使用Python开发游戏运行脚本（一）成功调用大漠插件上一篇我们已经简单实现了python调用大漠插件并输出版本号的功能，接下来我们要做的就是通过大漠插件模拟鼠标点击和键盘文字输入。由于近年来最热门的游戏基本都是手游，所以我们也会以手游为例来进行游戏脚本的开发。大漠插件是一款针对Windows平台的鼠标键盘模拟+图文查找库，这样我们要想实现手游脚本开发的第一步，就是下载Android模拟器，然后在对安卓模拟器进行鼠标和键盘的模拟，以此来实现自动化游戏脚本。一、Android模拟器的_大漠窗口绑定成功按键