以缩小的字体大小显示容器

Question

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

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

我可以用 HTML/CSS 做到这一点吗？

编辑上下文：

我正在使用某种主题，并且我希望避免在ems（我很清楚）中重新定义所有元素，也不要全部重新定义它们。

我真正想知道的是，是否有类似：.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 元素将全部是块引用大小的 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;
}

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

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。但这会缩放所有内容（没有 zoom-text 属性）。所以如果容器内只有文本就可以使用。

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