css - 如何在按比例转换的响应文本行之间设置一致的填充/边距

Question

我在字体和 css 相关问题上遇到了一些麻烦，希望大家能帮我解决这个问题。这是一个由两部分组成的问题。

1) 有什么方法可以在比例降低的文本之间设置一致的填充或边距大小？我已经尝试了一切，但填充和边距似乎只对应于文本大小......

2) 填充和边距一致性问题解决后，有什么方法可以使填充/边距和字体大小响应。例如，从笔记本电脑过渡到 iPhone。

下面是css和html代码。我还设置了一个 JSFiddle供功能引用。

CSS

#text {font-family:"helvetica"; font-weight: bold; font-style: normal; text-align: center; font-size: 20px; letter-spacing: 0.2em; height: auto;}
#text.s01 {font-size: 1000%;}
#text.s02 {font-size: 600%;}
#text.s03 {font-size: 300%;}
#text.s04 {font-size: 150%;}
#text.s05 {font-size: 80%;}
#text.s06 {font-size: 30%;}

HTML

<div id="text" class="s01">STACK</div>
<div id="text" class="s02">STACK</div>
<div id="text" class="s03">STACK</div>
<div id="text" class="s04">STACK</div>
<div id="text" class="s05">STACK</div>
<div id="text" class="s06">STACK</div>

谢谢大家:)

Answer 1

首先，您不应该多次使用相同的 ID，它应该是唯一的。接下来，为了保持相同的距离，可以设置一个line-height，见:

.text {font-family:"helvetica"; font-weight: bold; font-style: normal; text-align: center; font-size: 20px; letter-spacing: 0.2em; height: auto; line-height: 100px; }
.text.s01 {font-size: 1000%;}
.text.s02 {font-size: 600%;}
.text.s03 {font-size: 300%;}
.text.s04 {font-size: 150%;}
.text.s05 {font-size: 80%;}
.text.s06 {font-size: 30%;}

<div class="text s01">STACK</div>
<div class="text s02">STACK</div>
<div class="text s03">STACK</div>
<div class="text s04">STACK</div>
<div class="text s05">STACK</div>
<div class="text s06">STACK</div>

第二个问题很难。您只能为所有绝对值设置相同的行高。相对值，即使使用 CSS ~ 选择器(用于兄弟)，也始终是(因此得名)相对的，在本例中为字体大小。