显示按比例缩小字体大小的容器

Question

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

我想显示这个容器，字体大小按一定比例缩小，同时保留容器内元素之间的相对大小差异（例如 p 的字体大小必须始终为 4/ blockquote 的 5 个字体大小）。

我可以用 HTML/CSS 做这个吗？

编辑上下文：

我正在使用某种主题，我最好避免遍历所有元素以在 em 中重新转换它们（我很清楚），也不要重新定义它们全部.

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

Answer 1

您可以使用 SASS 并使用一些数学来确定字体大小。

一个简单的例子如下

$blocksize: 20px;

blockquote {
  font-size:$blocksize;
}

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

接下来为您的 'p' 个元素执行 blocksize 变量的操作。

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

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

Answer 2

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

例如：

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

Answer 3

'ems' 是你的朋友

如果容器的字体大小设置为10px，则可以指定其子元素的字体大小为ems，1em相当于父元素的字体大小所以在本例中：

p {
    font-size: 1.6em;
}

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

Answer 4

您可以使用 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, 那么你可以简单地使用 % percentage 值。

看这个例子：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;
}

显示按比例缩小字体大小的容器

Display container with scaled-down font-size

html

css

fonts

font-size

responsive-design