css - 缩放 MathJax 以适应响应式 div

Question

尝试使用包含 MathJax(本例中为 asciimath)的响应式 div 创建一个 AngularJS 指令，该 div 可以缩放以适应 div 中的可用空间。指令和大小计算都可以完美运行，并且可以独立运行。但是，在真实的应用程序中，MathJax 无法扩展。我已将其缩小到为 * 设置字体大小的托管应用程序。

MathJax 缩放技巧基于此 post by Davide Cervone .我创建了一个 stripped down demonstration CodePen .

一切都按预期进行。请注意，此演示不包括缩放计算或任何 Angular-goodness，因为它不是说明问题所必需的。

如果你删除了 * font-size 的注释...

    * {
      /* font-size: 9px; */
    }

第二个 MathJax 的缩放将被覆盖，方程式将收缩。

我试过在 div 和 span 上使用样式来设置比例，我试过像这样使 css 更明确...

    .divination .MathJax *  {
        font-size: 600%  !important;
    }

一切都无济于事。

因为这个指令将在其他人的应用程序中使用，我们无法控制他们设置 * 样式。

我感谢大家对完成这项工作的任何想法或见解。

吉姆

Answer 1

尝试

.divination {
  font-size: 200% ! important
}
.divination * {
  font-size: inherit
}

这在你的 codepen 中对我有用。