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

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

智能推荐

Linux 系统指定程序运行的显卡_mc linux 独显-程序员宅基地

文章浏览阅读3.3k次，点赞7次，收藏19次。一般租的服务器会有多张显卡，为了资源最大化利用同时运行程序，如果不指定显卡运行会导致多个程序抢占一张显卡运行，然后报错内存占满。我们先查看系统有多少张显卡，每张显卡的运行状态：nvidia-smi在终端输入上面的指令得到下面的结果，显示了系统安装的所有显卡和每张卡当前的状态，比如显卡0当前使用率为81%，已经比较接近占满了。我们观察到1，2，3，4，5都没程序使用，于是指定其中几张，指令如下CUDA_VISIBLE_DEVICES=3,4,1 python train.py意思为同时用显卡_mc linux 独显

《J2EE 学习笔记之 idea 搭建 SSM 项目》_j2ee用ssm-程序员宅基地

文章浏览阅读114次。J2EE 学习笔记之 idea 搭建 SSM 项目详细步骤step1step2_j2ee用ssm

大数据学习笔记之azkaban（一）：azkaban_azkaban executor.maxthreads-程序员宅基地

文章浏览阅读840次。文章目录一概述1.1为什么需要工作流调度系统1.2 常见工作流调度系统1.3 各种调度工具特性对比1.4 Azkaban与Oozie对比二 Azkaban介绍三..._azkaban executor.maxthreads

上传maven 项目到私有仓库_上传maven项目到私有仓库-程序员宅基地

文章浏览阅读1.8k次。&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:sch_上传maven项目到私有仓库

金字塔型php的9x9乘法口诀表,python中打印金字塔和九九乘法表的几种方法-程序员宅基地

文章浏览阅读733次。# 打印九九乘法表for i in range(1,10):for j in range(1,i+1):# x=i*j# print(i,'*',j,'=',x,end=' ')print('%s*%s=%s' %(i,j,i*j),end=' ') # end=' '表示不换行，只是加个空格print() # 单纯换行for i in range(1,10):for j in range(i..._使用php的循环嵌套做出九九乘法表金字塔

基于内容和主题的个性化新闻推荐系统设计需求分析[转载]_新闻推荐系统需求分析-程序员宅基地

文章浏览阅读8.6k次，点赞3次，收藏13次。基于内容和主题的个性化新闻推荐系统设计与实现需求分析过程：基于内容和主题的个性化新闻推荐系统设计与实现需求分析原理示意图本设计符合基于内容和主题的个性化新闻推荐系统设计与实现的开题报告中的大体实现方式方法。2.1 设计目标在本新闻推荐系统中，针对用户在网站中的浏览记录的cookies文件，对大量数据进行数据处理，实现精准分析某个用户特征行为和独特兴趣，并为其充分推送其可能感_新闻推荐系统需求分析

随便推点

python检查字符串中是否有中文字符并替换该中文字符_检测字符串是否有中文标点符号并替换 python-程序员宅基地

文章浏览阅读3.6k次。from glob import globimport osfloder="D:/DataSet/wuzuo/Quality_Gate_Mask/v1.0_vis/*"for i in glob(floder): for j in glob(i+"/*.jpg"): ss = "" for ch in j: if u'\u4..._检测字符串是否有中文标点符号并替换 python

同事写了一个疯狂的类构造器，我要疯了，Builder 模式都不会么？！！-程序员宅基地

文章浏览阅读98次。疯狂的类构造器最近栈长在做 Code Review 时，发现一段创建对象的方法：Tasktask=newTask(112,"紧急任务","处理一下这个任..._public builder with(biconsumer consumer, u value) {

深蓝学院-视觉SLAM十四讲-第三章作业_深蓝学院slam第三次作业答案-程序员宅基地

文章浏览阅读1.3k次，点赞5次，收藏18次。第三节课习题2.群的性质课上我们讲解了什么是群。请根据群定义，求解以下问题：{Z,+}\{\mathbb{Z}, + \}{Z,+}是否为群？若是，验证其满足群定义；若不是，说明理由。根据群定义可知{Z,+}\{\mathbb{Z}, + \}{Z,+}是群。证明如下：封闭性：∀z1,z2∈Z, z1+z2∈Z.\forall z_1,z_2 \in \mathbb{Z},\space z_1 + z_2 \in \mathbb{Z}.∀z1,z2∈Z, z1+z2_深蓝学院slam第三次作业答案