2

我设计了一个响应式的页面布局，可以很好地适应较小的屏幕，但是当我添加一个代码块（并使用 prism.js 对其进行格式化）时，响应性中断了。代码框和文本内容都溢出了设备的宽度，您必须来回滚动。理想情况下，代码块应该有自己的滚动条来查看代码，但内容仍然会适应。我尝试过使用包含内容的 flexbox 的不同属性，但它仍然会破坏布局。

为了缩小范围，我将页面精简为：

<!DOCTYPE html>
<head>
    <link rel='stylesheet' href='page.css' />
    <link href="./external/prism.css" rel="stylesheet" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
</head>

<body>
    <script src="./external/prism.js"></script>
    <div class="article-container">
        <article>
            <h1 class="title">Test</h1>
            <p>Dolorem neque quiquia dolor. Est dolor dolor dolorem adipisci consectetur. Adipisci ipsum velit dolore
                consectetur quisquam eius. Non velit est ipsum adipisci adipisci quaerat.</p>
            <pre><code class="language-python">def some_code(file_name):
    with open("some_path/" + file_name + ".md", "r", encoding="utf-8") as input_file:
        return input_file.read()
</code></pre>
        </article>
    </div>

</body>

</html>

page.css 包含：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.article-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

article {
    width: 800px;
}

如果我同时注释掉 .article-container 和 article 页面调整得很好，但如果其中任何一个存在，它就会中断。此外，如果我保留 CSS 原样并注释掉代码块，它是响应式的。

任何关于这些组件如何交互的类型都将不胜感激，谢谢！

编辑：澄清一下，当响应式设计不起作用时，页面宽度不适应屏幕尺寸。请参阅下面的屏幕截图：

全屏模式下的内容

没有 CSS的移动设备看起来如何 - 代码框按应有的方式滚动，但页面的其余部分会适应

移动端使用 CSS 的外观

请注意，2 也是使用 CSS 和没有代码块时网站的外观。所以关于他们互动方式的一些事情正在打破。

4

2 回答 2

1

我可以通过添加overflow: auto;文章部分的 CSS 来解决这个问题。

https://gist.github.com/grahamjpark/0cb9d2cfbe7a972bc20320781806e284#file-test-css-L15

我在这里找到了答案：

<pre> 内容不缩小的 Flex 项目

尽管如果这不能解决您的问题，这看起来很有用：

https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow

于 2020-07-25T02:25:30.650 回答
0

我认为你的问题在于这条规则：

    article {
        width: 800px;
    }

这就是为什么代码顶部的文本不会根据屏幕自行调整的原因。

代码标签本身必须隐含一些 CSS 规则，以防止代码包装或“响应”屏幕，因为缩进在该元素内很重要，并且不应该受到屏幕大小的太大影响。

也许你会想要添加一个overflow-x:auto; 到元素，以便在屏幕不够宽时滚动查看更多代码。如果您也想在代码中向下滚动，这也适用于溢出。

于 2020-07-19T21:07:16.080 回答