Question

想象一下有一个容器，下面会有许多其他元素。这些元素中的每一个都可能将字体大小设置为显式（例如p可能是16px，blockquote，20px等。

我希望显示此容器的字体大小按比例缩小某个因子，同时保留容器内元素之间的相对大小差异（例如p＆n;字体大小必须始终为4 / blockquote的字体大小。

我可以使用HTML / CSS执行此操作吗？

编辑上下文：

我使用某种主题，我最好希望避免通过所有元素重新投射它们em（我很清楚），也不会定义它们。

我真正想知道的是，是否有类似.myDiv { font-size-scale: 0.5; }的内容，我可以申请并完成。

Answer 1

您可以使用date。

执行此操作

<强> HTML ，

em

<强> CSS ，

<div>
  <p>Some Text</p>
  <blockquote>Some Block</blockquote>
</div>

<div class="small">
  <p>Some Text</p>
  <blockquote>Some Block</blockquote>
</div>

请参阅示例：https://jsfiddle.net/toz75hp2/3/

如果您想避免p { font-size: 2em; } blockquote { font-size: 4em; } div { font-size: 16px; } div.small { font-size: 9px; }， ，那么您只需使用em值即可。

请参阅此示例：https://jsfiddle.net/toz75hp2/4/

<强> CSS ，

% percentage

跨浏览器警告！ 它不适用于所有浏览器。有些人给出了意想不到的结果。

或者您只是引用缩放，您只需使用css p { font-size: 200%; } blockquote { font-size: 350%; } div { font-size: 16px; } div.small { font-size: 9px; }即可。但这将缩放所有内容（没有缩放文本属性）。如果你只在容器里面有文字，那么可以使用。

请参阅示例：https://jsfiddle.net/toz75hp2/5/

zoom

Answer 2

您可以使用SASS执行此操作并使用一些数学来确定字体大小应该是什么。

一个简单的例子如下

$blocksize: 20px;

blockquote {
  font-size:$blocksize;
}

将blockqoute字体大小设置为变量。然后将该变量应用为blockquote的字体大小。

接下来为你的＆＃39; p＆＃39;操作blocksize变量。元件。

p {
  font-size:$blocksize * 0.2;
}

现在p元素将是你的blockquote大小的80％或4/5。

Answer 3

px是绝对大小控制，em是相对大小控制。使用em应该允许你按照你想要的方式缩放和调整大小。虽然它可能很痛苦，但如果您有16px，20px等默认值，并且您只希望特定容器具有不同的大小调整值，则可能需要使用内联样式属性。

例如：

<p style="font-size: 1em">Text here.</p>

Answer 4

＆＃39; EMS＆＃39;是你的朋友

如果将容器的字体大小设置为10px，则可以将其子元素的字体大小指定为ems，1em与父元素的字体大小相当，所以在这种情况下：

p {
    font-size: 1.6em;
}

与16px相当。在元素内设置剩余的字体大小，然后上下缩放它们，只需更改容器的字体大小即可。您的子元素字体将随着字体大小的变化而缩放。

显示缩小字体大小的容器

4 个答案: