【问题标题】:Should I use pixels, em or neither? [closed]我应该使用像素,em还是都不使用? [关闭]
【发布时间】:2013-02-20 14:58:02
【问题描述】:

我试图在 css 中得到明确的答案。我正在考虑是否应该使用

line-height: 1.5;

line-height: 1.5em;

line-height: 15px;

一些网站说不要指定empx。所以在那个注释上,我应该说这样的话:

margin: 10px;

margin: 10em;

你怎么看?

【问题讨论】:

  • 我的看法是没有“明确的答案”,这取决于您的用例和要求;由于“讨论”和“推测”的可能性,而且我认为这是不可避免的,因此投票以“不具建设性”的方式结束。
  • @DavidThomas 我同意,但line-height 的情况除外,在这种情况下,有充分的理由更喜欢其中一个(无单位)。

标签: css html xhtml em


【解决方案1】:

Em 允许您的网站具有弹性,因此它可以根据屏幕尺寸调整大小,但是,如果您真的希望它能够正常工作,那么您可以使用 EM 进行页面上的所有测量。我发现我的大部分布局都使用 EM。

【讨论】:

【解决方案2】:

line-height 首选无单位数字,因为其他单位可能存在继承问题,如 MDN line-height docs 中所述。

对于其他属性,这将完全取决于您想要什么,以及您是否希望事物是固定大小的,还是相对于您的文本大小。

【讨论】:

    【解决方案3】:

    显然这取决于很多事情。

    作为一般规则,使用 em 表示任何与文本相关的内容,使用 px 表示任何与装饰相关的内容。因此内边距和边框应该是 px,文本大小、宽度、高度等应该是 em 或 %(或者更好的是,流畅的布局)。

    想象一下您正在使用大文本显示; 想要更大的元素是什么?增大边框可能会减少文本的空间,所以这确实是一件负面的事情。

    对于行高,您不应该使用单位(或 em,但这会浪费 2 个字符);它是字体大小的比例。如果你使用 px,你最终可能会得到一个小于文本的 line-height,这是 bad

    这个网站提出了一个关于无单位与 em 的有趣观点:http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/。这个想法是使用 em 将为所有孩子设置一个固定的行高,即使字体大小不同,而不使用任何单位将使用一个始终相对于字体大小的行高。在大多数情况下,后者会更可取,但我可以想到您也需要前者的情况。

    【讨论】:

    • 在发布此内容之前,我确实看过该网站,但并不觉得我真的知道该做什么。谢谢,戴夫!你知道,如果所有浏览器都以相同的方式运行,所有这一切都不是什么大问题:(
    【解决方案4】:

    在定义边距时尽可能不要使用 px。使用 em% 等相对单位,因为它是可重排布局。我们必须始终想象并考虑布局在小型设备和调整大小的文本上的样子。

    • 对于垂直文本边距(margin-top 或 margin-bottom),使用 ems 这取决于字体大小

    • 对于水平宽度,使用 %

    • 对于靠近左边框的边距,我们可以使用 px 如果它小于 50 像素。

    • 确保所有图像都包含在 div/figure 元素中 img 设置为 100%,高度设置为 auto

    • 横向尺寸的图像建议设置为 50% 宽度和向左或向右浮动

    • 建议将纵向尺寸的图像设置为 33% 宽度和向左或向右浮动

    【讨论】:

    • 啊!好的。嗯,首先感谢您的回复。我一年左右没有做过任何与网络相关的事情,环境已经发生了很大变化。 HTML5 受到了沉重打击。在我习惯所有这些东西之前,我仍然使用严格的 xhtml。我真的很感激,所有。显然要考虑很多:)
    猜你喜欢
    • 2010-12-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-20
    • 2013-05-23
    • 2013-02-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多