Question

所以我遇到了一些转换数学目标÷上下文=结果目标，将px转换为em百分比。

据我所知，这可以保持您的布局流畅。我不明白的是插入方程式的内容。我是否会在通常使用像素大小的所有内容上使用此功能？任何人都可以通过正确的方式来启发我使用它进行转换和设计吗？感谢

Answer 1

上找到有关该公式的更多信息

  target ÷ context = result
如果我们假设正文的默认类型大小为16px，我们可以插入每个所需的字体大小值到此公式中。所以要正确匹配我们的标题到comp，我们将目标值（24px）除以font-size 它的容器（16px）：
  24 ÷ 16 = 1.5
所以标题是默认主体大小的1.5倍，或1.5em，我们可以直接插入我们的样式表。
   h1 {
     font-family: Georgia, serif;
     font-size: 1.5em;        /* 24px / 16px = 1.5em */
   }

在处理文字时，em和%非常相同：
100% == 1em
50% == 0.5em

在设计网格时，我会直接用百分比（或列）来思考，而不是手工进行转换。

Answer 2

此页面https://pxtoem.net/learn上有关于CSS度量单位（尤其是关于px和em）的良好摘要信息

此服务还提供了不同CSS单元之间的转换器，因此您可以立即尝试使用它们。

EM单位（em）

em等于该字体的计算字体大小   元素的父级。例如，如果有一个div元素定义为   font-size：16px然后该div及其子元素1em = 16px。如果   没有明确定义font-size，该元素将从其继承   父元素。继承继续以这种方式发生   直到祖先为止。的默认字体大小   根元素由浏览器提供。

这里是一个示例，可以帮助您了解如何使用em   单位：

css：
html {
  font-size: 16px;
}

div {
  font-size: 18px;
}

p {
  font-size: 1.5em;
}

code {
  font-size: 1.2em;
}
html：
<html>
  <body>

    <div>
      <p>
        Font size here will be 27px (18 * 1.5)
      </p>
    </div>

    <p>
      Font size here will be 24px (16 * 1.5)
    </p>

    <code>
      Font size here will be 19.2px (16 * 1.2)
    </code>

  </body>
</html>

该页面上也有类似的代码片段，展示了相对于根元素大小的rem（根em）值。

将px理解为响应式设计的百分比

2 个答案: