html - 如何使用 body 和 html 预设大小正确计算出 briefed px to em

Question

我正在为一份潜在的工作做一个编码测试，想得到正确的计算，想知道是否有人知道一个在线工具，我可以用它来根据框架主体和它的 html 大小转换简报中请求的像素大小使用...

我使用的默认值:

html {
    font-size: 62.5%
}
body {
    font-size: 1.5em;
    line-height: 1.6;
    font-weight: 400;
    font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #222
}

我认为使用 em 更干净，并且是设置字体大小等的更好方法...因为当时已经提到我需要使用什么大小来处理一些以像素为单位的东西，但不确定如何将请求 PX 转换为 EM基于上述框架中的im设置。

字体大小:

• 基数:16px
• 小:14px
• 标题:21px

例如我想创建标题

h1 {
  font-size: 1.8em; /* for example: but the correct em what would relate to 21px */
}

我找到了这个有用的工具:http://pxtoem.com/ - 但是知道它会正确计算，因为只允许您选择正文大小，但认为 HTML 中设置的 62.5% 会将设置的正文大小调整为 62.5% 正确吗？

Answer 1

我已经做了一些计算，并确定这是定义集合并轻松转换集合的最佳解决方案，这个答案可能对任何人都有帮助。

CSS 基础:

html {
    font-size: 62.5%; /* 1rem = 10px on default browser settings (16px) */
}
body {
    font-size: 16px; /* setting PX unit for browsers that dont support rem below */
    font-size: 1.6rem; /* default to be used, browsers that dont support REM will use PX above */
    line-height: 1.5;
    font-family: sans-serif; /* used current font-family used on live website */
    color: #283533;
}

em 单位与父级的字体大小有关，这会导致复合问题。 rem 单位是相对于根元素或 html 元素的。这意味着我们可以在 html 元素上定义一个单一的字体大小，并将所有 rem 单位定义为该字体的百分比。

在这种情况下，我将基本字体大小定义为 62.5%，以便以类似于使用 px 的方式方便地调整 rems 大小。

你会注意到我在这个例子中同时定义了 px 和 rem

font-size: 16px; font-size: 1.6rem;

但是为什么？好吧，对于不支持 rem 的任何旧浏览器来说，这是一种后备方法，但这种方法，转换更容易使用，因为我相信你会同意......示例:

• 8px = 0.8rem;
• 10px = 1rem;
• 14px = 1.4rem;
• 26px = 2.6rem;

希望这对任何想要准确处理此类尺码转换的人来说都是一个很好的答案