想象一个容器，下面会有许多其他元素。这些元素中的每一个都可以显式设置其字体大小（例如，p可能是16px，blockquote，20px等）。
我希望显示此容器，字体大小按一定比例缩小，同时保留容器内元素之间的相对大小差异（例如，p的字体大小必须始终为blockquote字体大小的4/5）。
我可以用HTML/CSS做这件事吗？
编辑上下文：
我使用了某种主题，并且我希望避免遍历所有元素以在< code>ems中重新转换它们(我很清楚这一点),也不要重新定义它们。
我真正想知道的是，是否有类似于：.myDiv｛font-sizescale:0.5；｝的东西，我可以直接应用并完成。
您可以使用em执行此操作。
HTML，
<div>
<p>Some Text</p>
<blockquote>Some Block</blockquote>
</div>
<div class="small">
<p>Some Text</p>
<blockquote>Some Block</blockquote>
</div>
CSS，
p { font-size: 2em; }
blockquote { font-size: 4em; }
div { font-size: 16px; }
div.small { font-size: 9px; }
请看例子:https://jsfiddle.net/toz75hp2/3/
如果你想避免em，那么你可以简单地使用%百分比值。
请看这个例子:https://jsfiddle.net/toz75hp2/4/
CSS，
p { font-size: 200%; }
blockquote { font-size: 350%; }
div { font-size: 16px; }
div.small { font-size: 9px; }
跨浏览器警告！它不能在所有的浏览器上工作。有些给出了意想不到的结果。
或者你只是指缩放，你可以简单地使用css zoom。但是这将缩放所有内容(没有缩放文本属性)。因此，如果容器中只有文本，也可以使用。
请参见示例：https://jsfiddle.net/toz75hp2/5/
.zoom {
zoom: 2;
-moz-transform: scale(2);
-moz-transform-origin: 0 0;
-o-transform: scale(2);
-o-transform-origin: 0 0;
-webkit-transform: scale(2);
-webkit-transform-origin: 0 0;
}
您可以使用SASS来完成此操作，并使用一些数学来确定字体大小。
一个简单的例子如下
$blocksize: 20px;
blockquote {
font-size:$blocksize;
}
您将blockqoute字体大小设置为变量。然后应用该变量作为块引号的字体大小。
接下来对“p”元素的块大小变量进行操作。
p {
font-size:$blocksize * 0.2;
}
现在 p 元素将全部是块引用大小的 80% 或 4/5。
px是绝对大小控制，em是相对大小控制。使用em应该可以让你按照你想要的方式缩放和调整大小。虽然这可能很痛苦，但如果你有默认值，比如16px，20px，你只希望特定容器有不同的大小值，你可能想使用内联样式属性。
例如:
<p style="font-size: 1em">Text here.</p>
