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

Question

所以我遇到了一些转换数学目标÷Context = Result Target将px转换为em百分比.

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

Answer 1

您可以在A List Apart上找到有关该公式的更多信息

  target ÷ context = result

如果我们假设正文的默认类型大小为16px,我们可以将每个所需的字体大小值插入此公式中.因此,为了将我们的标头与comp正确匹配,我们将目标值(24px)除以其容器的字体大小(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

在设计网格时,我会直接用百分比(或列)来思考,而不是手工进行转换.