假设我们有一个div元素,其中包含零填充、绝对定位、预定义宽度(以像素为单位)和一些纯文本。
现在,我们将文本的 CSS font-size 属性增加一个像素。我应该通过什么措施增加div的宽度以使其布局保持不变(即,由于宽度不成比例地增加,没有单词从一行跳到另一行)?
如果无法以像素为单位设置 CSS 字体大小,则应将其设置为pt或em,为什么?
您想同时指定 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 在宽度和字体大小方面都变大。
我从未见过在 CSS 中甚至在基于 Web 的应用程序中完成过这样的事情。也就是说,第二个问题的答案是 em ,这对字体 em 或 pt更好。为什么?因为 em 用于测量字体大小,并且在设计上是成比例的:1em 是正文字体大小的 100%。1.1em 是 110%,0.8em 是 80%,以此类推。
Scriptaculous将其作为内置效果。试试看。
new Effect.Scale('id_of_element', percent, [options]);
正如 CLaRGe 所说,em 是基于父元素字体大小的度量,因此当您希望元素的大小与字体大小成正比时,使用它是自然的选择。如果您以像素为单位测量字体大小,则 em 是以像素为单位的字体大小,例如,当您的字体大小为 10px 时,200px 表示 20em。
CSS 本身是一个相当静态的东西,div 也是如此。
您不能使一个元素的属性依赖于其他元素的属性。即使对于单个元素,您也无法将其某些属性与其他属性同步。
显示自动调整的某些特征的唯一内置解决方案是 HTML 表格,但您可能不希望使用它。
添加这种动态的唯一方法是使用脚本语言,如 JavaScript。