当前位置: 首页 > 面试题库 >

为什么用em而不是px?

蓬新
2023-03-14
问题内容

听说您应该在样式表中使用em而不是像素来定义尺寸和距离。所以问题是,为什么在CSS中定义样式时应该使用em而不是px?有一个很好的例子可以说明这一点吗?


问题答案:

我问这个问题的原因是,我忘记了如何使用em,因为我在CSS中愉快地编程时已经很久了。人们没有注意到我把这个问题笼罩了,因为我并不是在谈论字体本身的大小。我对如何在页面上的
任何给定块元素 上定义样式更感兴趣。

正如Henrik Paul和其他人指出的,em与元素中使用的字体大小成正比。在px中以块元素定义大小是一种常见的做法,但是,在浏览器中调整字体大小通常会破坏这种设计。调整字体大小通常是通过快捷键Ctrl++Ctrl+完成的-。因此,一个好的做法是使用em代替。

使用px定义宽度

这是一个说明性的例子。假设我们有一个div标签,我们希望将其变成一个时尚的日期框,我们可能会有如下所示的HTML代码:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

一个简单的实现将以date-boxpx 为单位定义类的宽度:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

问题

但是,如果我们要在浏览器中放大文本大小,则设计会中断。文字也会在框外出血,这与flodin指出的SO设计中的情况几乎相同。这是因为该框的宽度保持与锁定时相同的大小50px

改用em

一个更聪明的方法是用ems定义宽度:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

这样,您就可以在日期框上进行流畅的设计,即框将与文本一起按日期框定义的字体大小按比例放大。在此示例中,font-
size的定义*为10pt,它将是该字体大小的2.5倍。因此,在浏览器中调整字体大小时,该框的大小是该字体大小的2.5倍。



 类似资料:
  • 问题内容: 我已经在Android代码中使用FloatBuffers一段时间了(从一些opengles教程中复制了它),但是我无法确切地理解此构造是什么以及为什么需要它。 例如,我在许多人的代码和android教程中看到了以下代码(或类似代码): 就我所知,这似乎是冗长和混乱的,我只是说它们只是一个浮点数的包装而已。 问题: 与任何其他类型的float集合或简单数组相反,这种类型的类(ByteBu

  • 很多人问了此问题,说bzero已经被posix-2008废弃,为何还使用bzero。选择bzero而不是memset,有2个原因: bzero有2个参数,指针和长度,很明确就是将制定size的内存初始化为0。而memset有3个参数,需要记忆参数的位置,有不少人经常把长度和初始化值搞错。 bzero比memset的可读性要好。memset可以制定初始化的值,实际上绝大多数情况都是0。 一旦新版本g

  • 我试图理解背后的动机。如果已经存在类型类和,为什么有必要呢? 诚然,的实例是具体的类型,而的实例需要一个类型参数。(有关有用的解释,请参见Monoid vs MonadPlus。)但是你不能重写任何类型的约束吗 作为和的组合? 从。它的实施是: 我只能使用和实现它: 有人能澄清和之间的真正区别吗?

  • 问题内容: 我不确定为什么列出项目时为什么需要使用ul-li而不是简单地使用div。我可以使两者看起来完全一样,因此与创建div相比,创建无序列表的功能优势在哪里? 问题答案: 为了语义正确。HTML具有表达事物列表的功能,它可以帮助Google机器人,屏幕阅读器以及所有不仅仅关心网站外观的用户更好地了解您的内容。

  • 问题内容: 的OpenJDK代码包括以下行: 为什么在这里使用,而不是?我很好奇。 问题答案: 要强调的是,数字是2的幂,而不是一个完全任意的选择。因此,它警告开发人员尝试不同的数字,他们应该在模式中使用其他数字(例如或,而不是),这样他们就不会破坏依赖于两个要求的幂的方法。有评论略高于: 任何一个的容量(表长度)始终是2的幂。之所以这样设计,是因为它允许使用快速的按位AND操作()将每个键的哈希

  • 我花了很多时间来解决这个问题。我是GRAILS和GROOVY中的begginer。我有一个名为“tms\u dev”的旧oracle数据库模式。此架构有一些表(例如checktypes表)。此外,我还有由GRAILS生成的域类Checktype和ChecktypesController类-controller。 此类具有列表方法: def列表(最大整数){ } 我还配置了Datasource。gr