2

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

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

如果无法以像素为单位设置 CSS 字体大小，则应将其设置为pt或em，为什么？

4

5 回答 5

6

您想同时指定 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 中指定大小的 em 是相对于 body 元素中的字体大小测量的。增加 body 元素的字体大小会使 div 中的 em 在宽度和字体大小方面都变大。

于 2009-04-21T19:44:40.127 回答
1

我从未见过在 CSS 中甚至在基于 Web 的应用程序中完成过这样的事情。也就是说，第二个问题的答案是 em ，这对字体 em 或 pt更好。为什么？因为 em 用于测量字体大小，并且在设计上是成比例的：1em 是正文字体大小的 100%。1.1em 是 110%，0.8em 是 80%，以此类推。

于 2009-04-21T17:54:01.110 回答
0

Scriptaculous将其作为内置效果。试试看。

new Effect.Scale('id_of_element', percent, [options]);
于 2009-04-21T17:45:32.300 回答
0

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

于 2009-04-21T17:56:56.203 回答
0

CSS 本身是一个相当静态的东西，div 也是如此。

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

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

添加这种动态的唯一方法是使用脚本语言，如 JavaScript。

于 2009-04-21T18:15:18.360 回答