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，它应该是唯一的。接下来，要保持相同的距离，可以设置行高，请参阅：

＆＃13;

.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%;}

＆＃13;

<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>

＆＃13;

第二个问题很难。您只能为所有绝对值设置相同的行高。相对值，即使使用CSS ~选择器（对于兄弟姐妹），也总是（因此名称）相对，在这种情况下是字体的大小。

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

1 个答案: