CodeMirror 响应式设计

Question

所以我正在使用 CodeMirror 创建一个 iOS Web 应用程序，教你如何使用基本的 JavaScript，我只是意识到 CodeMirror 不会自动调整大小以适应设备的屏幕并且代码不适合屏幕...所以我真的需要 A. 要么让 CodeMirror 完美地适合屏幕。或者 B. 有一个完全自定义的语法突出显示完全响应的文本区域。

Answer 1

您所说的完全适合屏幕可能是指主体的默认填充。删除它：

body, html {
    padding: 0;
    margin: 0;
}

接下来我会推荐这个视口：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">

如果你想改变字体大小，你可以这样做：

.CodeMirror {
    font-size: 20px;
}

如果 CodeMirror 应该是全高：

.CodeMirror {
    height: 100vh;
}

演示：https://codepen.io/quic5/pen/maxjmB