移动设备上的 CSS 网格布局和预格式化

问题描述 投票：0回答：1

我尝试将一个相当简单的网站移至网格布局。 HTML 看起来像这样：

<body>
<header> ... </header>
<div> ... </div>    
<footer> ... </footer>
</body>


body
元素的子元素按行显示，在非移动设备上，宽度应为 60em：

body
{
    display: grid;
    justify-content: center;
    grid-auto-flow: row;
    gap: 4px;
    max-width: 80em;
}
@media (min-width: 751px)
{
    body > * {
        width: 60em;
        max-width: 60em;
    }
}

这（在任何设备上）效果很好，除了包含 

code
类段落的页面，格式如下：

p.code
{
    font-family: monospace;
    white-space: pre;
    padding: 1em 2em 1em 2em;
    background-color: #CCC;
    border: 1px #333 solid;
    margin: 2em 3em 2em 3em;
    overflow: auto;
}

在这种情况下，页面在移动设备上显示得太宽。在我之前的（非网格）设计中，

code
段落可以在小屏幕上正确呈现（并且您必须水平滚动以获得较长的代码行）。我该如何避免基于网格的布局出现此问题？

html css css-grid
1个回答
0
投票

我认为差异来自于以下事实：

751px !- 60em
，所以我在媒体查询中使用了它。我还修改了媒体查询以仅涉及正文。
试试这个：

body {
  display: grid;
  justify-content: center;
  grid-auto-flow: row;
  gap: 4px;
}

p.code {
  font-family: monospace;
  white-space: pre;
  padding: 1em 2em 1em 2em;
  background-color: #CCC;
  border: 1px #333 solid;
  margin: 2em 3em 2em 3em;
  overflow: auto;
}

@media (min-width: 80em) {
  body {
    width: 60em;
    max-width: 60em;
  }
}
<header>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at elementum nunc, sed tincidunt massa. Vestibulum rhoncus, libero nec porttitor gravida, orci arcu commodo est, sodales tristique neque eros vulputate mi. Curabitur ac lorem mattis, suscipit
  massa rutrum, suscipit metus. Aenean non leo malesuada, facilisis velit ac, mollis magna. Mauris in magna et leo porta malesuada. Donec blandit mi orci, at lacinia libero facilisis ac. Sed at felis lectus. Quisque et pharetra mi. Praesent vel mi id
  leo condimentum accumsan vitae lobortis nibh. Aliquam quis sapien et libero semper malesuada quis vitae dolor. Sed dapibus consectetur turpis nec tempus. Pellentesque elit erat, dapibus eget gravida quis, commodo at leo. Maecenas non blandit nunc.
</header>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at elementum nunc, sed tincidunt massa. Vestibulum rhoncus, libero nec porttitor gravida, orci arcu commodo est, sodales tristique neque eros vulputate mi. Curabitur ac lorem mattis, suscipit
  massa rutrum, suscipit metus. Aenean non leo malesuada, facilisis velit ac, mollis magna. Mauris in magna et leo porta malesuada. Donec blandit mi orci, at lacinia libero facilisis ac. Sed at felis lectus. Quisque et pharetra mi. Praesent vel mi id
  leo condimentum accumsan vitae lobortis nibh. Aliquam quis sapien et libero semper malesuada quis vitae dolor. Sed dapibus consectetur turpis nec tempus. Pellentesque elit erat, dapibus eget gravida quis, commodo at leo. Maecenas non blandit nunc.</div>
<p class="code">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at elementum nunc, sed tincidunt massa. Vestibulum rhoncus, libero nec porttitor gravida, orci arcu commodo est, sodales tristique neque eros vulputate mi. Curabitur ac lorem mattis, suscipit
  massa rutrum, suscipit metus. Aenean non leo malesuada, facilisis velit ac, mollis magna. Mauris in magna et leo porta malesuada. Donec blandit mi orci, at lacinia libero facilisis ac. Sed at felis lectus. Quisque et pharetra mi. Praesent vel mi id
  leo condimentum accumsan vitae lobortis nibh. Aliquam quis sapien et libero semper malesuada quis vitae dolor. Sed dapibus consectetur turpis nec tempus. Pellentesque elit erat, dapibus eget gravida quis, commodo at leo. Maecenas non blandit nunc.</p>
<footer>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at elementum nunc, sed tincidunt massa. Vestibulum rhoncus, libero nec porttitor gravida, orci arcu commodo est, sodales tristique neque eros vulputate mi. Curabitur ac lorem mattis, suscipit
  massa rutrum, suscipit metus. Aenean non leo malesuada, facilisis velit ac, mollis magna. Mauris in magna et leo porta malesuada. Donec blandit mi orci, at lacinia libero facilisis ac. Sed at felis lectus. Quisque et pharetra mi. Praesent vel mi id
  leo condimentum accumsan vitae lobortis nibh. Aliquam quis sapien et libero semper malesuada quis vitae dolor. Sed dapibus consectetur turpis nec tempus. Pellentesque elit erat, dapibus eget gravida quis, commodo at leo. Maecenas non blandit nunc.</footer>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.