Question

假设我们有一个 div 元素，零填充，绝对定位，预定义宽度（以像素为单位）和一些纯文本。

现在，我们将文本的CSS font-size属性增加一个像素。我应该以什么方式增加 div 的宽度，使其布局保持不变（即由于宽度不成比例地增加，没有单词从一行跳到另一行）？

如果无法以像素为单位设置CSS字体大小，是否应在 pt 或 em 中设置，为什么？

Answer 1

您想要指定div的宽度和ems中的字体大小。下面是一个示例，其中更改字体大小（以像素为单位）会导致div和文本按比例调整大小而不更改布局：

<html>
  <head>
    <title>Proportional Resize Example</title>
    <style>
      body {font-size:10px}
      div {
        position:absolute;
        top:100px;
        left:100px;
        width:20em;
        font-size:2em;
        padding:0;
        background:green}
    </style>
  <head>
<body>
  <div>
    This text will resize proportionally.
    This text will resize proportionally.
    This text will resize proportionally.
  </div>
</body>
</html>

在此示例中，如果更改body元素的字体大小，则所有内容都将按比例调整大小。这是因为我们用来指定div中的大小的ems是相对于body元素中的字体大小来测量的。增加body元素的字体大小会使div的宽度和字体大小都更大。

Answer 2

我从来没有在CSS或基于网络的应用中看到过这样的事情。也就是说，对于第二个问题，对于字体，em或pt更好的答案是 em 。为什么？因为em用于测量字体大小并且按设计成比例：1em是正文文本字体大小的100％。 1.1em是110％，0.8em是80％，依此类推。

Answer 3

Scriptaculous将此作为内置效果。试一试。

new Effect.Scale('id_of_element', percent, [options]);

Answer 4

正如CLaRGe所说，em是基于父元素字体大小的测量，因此当您希望元素的大小与字体大小成比例时，它是自然的选择。如果您以像素为单位测量字体大小，那么em就是您的字体大小（以像素为单位），例如字体大小为10px时200px表示20em。

Answer 5

CSS本身就是一个非常静态的东西，以及div。

您不能使一个元素的属性取决于其他元素的属性。即使对于单个元素，也无法将其某些属性与其他元素同步。

显示自动调整某些特征的唯一内置解决方案是HTML表格，但您可能不希望使用它。

添加此动态的唯一方法是使用JavaScript等脚本语言。

如何根据内部文本按比例调整div？

5 个答案: