缩放 MathJax 以适应响应 div

Question

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

的托管应用程序设置字体大小

MathJax 缩放技巧基于此 post by Davide Cervone. I have created a stripped down demonstration CodePen。

一切正常。请注意，此演示不包括缩放计算或任何 Angular-goodness，因为没有必要说明问题。

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

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

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

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

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

一切都无济于事。

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

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

吉姆

Answer 1

尝试

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

这在你的 codepen 中对我有用。