2

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

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

如果无法以像素为单位设置 CSS 字体大小,则应将其设置为ptem,为什么?

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