Css 如何根据内部文本按比例调整div的大小？
假设我们有一个div元素，里面有零填充、绝对定位、预定义的宽度（以像素为单位）和一些纯文本 现在，我们将文本的CSS字体大小属性增加一个像素。我应该通过什么措施来增加div的宽度，以使其布局保持不变（即，没有单词因宽度不成比例地增加而从一行跳到另一行） 如果以像素为单位设置CSS字体大小是不可能的，那么应该以pt或em为单位设置，为什么？具有内置效果。试试看Css 如何根据内部文本按比例调整div的大小？,css,fonts,font-size,Css,Fonts,Font Size,假设我们有一个div元素，里面有零填充、绝对定位、预定义的宽度（以像素为单位）和一些纯文本 现在，我们将文本的CSS字体大小属性增加一个像素。我应该通过什么措施来增加div的宽度，以使其布局保持不变（即，没有单词因宽度不成比例地增加而从一行跳到另一行） 如果以像素为单位设置CSS字体大小是不可能的，那么应该以pt或em为单位设置，为什么？具有内置效果。试试看 new Effect.Scale('id_of_element', percent, [options]); 我从未见过在CSS中或甚至
new Effect.Scale('id_of_element', percent, [options]);
我从未见过在CSS中或甚至作为基于web的应用程序这样做。也就是说，你第二个问题的答案是em，em和pt哪个字体更好。为什么？因为em用于测量字体大小，并且与设计成比例：1em是正文字体大小的100%。1.1em是110%，0.8em是80%，依此类推。正如CLaRGe所说，em是基于父元素字体大小的度量，因此当您希望元素大小与字体大小成比例时，使用它是自然的选择。如果以像素为单位测量字体大小，则em是以像素为单位的字体大小，例如，当字体大小为10px时，200px表示20em。CSS本身就是一个静态的东西，div也是如此 不能使一个元素的属性依赖于另一个元素的属性。即使对于单个元素，也无法将其某些属性与其他属性同步 显示自动调整某些特性的唯一内置解决方案是HTML表，但您可能不希望使用它
添加这种动态的唯一方法是使用脚本语言，如JavaScript。您希望在ems中同时指定div的宽度和字体大小。下面是一个示例，更改字体大小（以像素为单位）会导致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>
比例调整示例
正文{字体大小：10px}
div{
位置：绝对位置；
顶部：100px；
左：100px；
宽度：20em；
字号：2em；
填充：0；
背景：绿色}
此文本将按比例调整大小。
此文本将按比例调整大小。
此文本将按比例调整大小。
在本例中，如果更改body元素的字体大小，所有内容都将按比例调整大小。这是因为我们用来在div中指定大小的ems是相对于body元素中的字体大小测量的。增加body元素的字体大小会使div中的ems在宽度和字体大小方面都变大 为了扩展性，在这种情况下，最好使用一个id，而不是一个覆盖div覆盖。不过，这应该可以做到。