我正准备开始一个将显示代码的 webapp/phonegap 应用程序。
我将使用 highlight.js 来显示代码。HighlightJs 使用 pre 标签，并有一个名为 monokai_sublime 的样式，它使用固定宽度的字体
我有经过仔细编辑的代码片段，最长为 40、60 或 80 个字符。
我想要的是一些 css 或视口魔术，我可以在其中拥有 3 个 css 类 .code40、.code60、.code80，当我在元素上设置它们时，它将使其达到元素宽度恰好包含 40 的位置， 60 或 80 个固定大小的字符。
所以我想在占据整个宽度的地方展示这个片段
do_some_cool_magic(with,stuff); //size40
但也以相同的宽度（全宽）显示此片段，因此字体大小更小
do_some_cool_magic(with, {stuff:"that is longer"}); //size60
如果我将手机切换到横向，它仍然应该做同样的事情。如果应用了类 code60，则 60 个字符应该是屏幕的全宽（或 div）
现在我只是硬编码了我的手机屏幕具有的假定像素数（1080x1920）并将字体大小设置为匹配的像素数量，但在我的手机上，它显示为巨大的字母并且不适合屏幕（有滚动，好像它被放大了 200%，嗯，它取决于屏幕的确切大小/比例）
这是 jsfiddle http://jsfiddle.net/xqck5j4g/
我不希望你重写小提琴，但我想知道设置我的 css 的有效方法是：当我在代码块上设置 class .code60 时，无论屏幕大小、方向、dpi 等如何，字体的宽度应为 60 个字符。 如果有帮助，我们可以假设宽度始终为 100%。