移动网站内容被屏蔽

Question

我正在为自己（Jerico）编写一个网站，并决定在移动设备上测试它，但所有内容都被推到左侧。我尝试使用元视口和调整 CSS，但它不起作用。有人可以帮助我让网站在移动设备上不那么混乱吗？

我花了大约 9 个小时无缘无故地编码并进行研究，但什么也没弄清楚。请帮忙。

这是我的网站和 Github： jericogit.github.io/Jerico/Index.html https://github.com/JericoGit/Jerico

Answer 1

您的网站在移动设备上这样做有几个原因。我可以看到您正在使用 Flexbox，这是一个好的开始，但是可以采取一些措施来使其正确包裹。我会注意到，虽然有些人更喜欢网格，但我更喜欢 Flexbox，所以我会基于此提出建议。

首先，对于主体，我喜欢添加溢出：隐藏；阻止网站上出现任何突出内容。

body {
  /* your css */
  overflow: hidden;
}

接下来，我们可以解决内容压缩问题。至少有两种简单的方法可以实现它。

选项1 我有时会使用这个选项，但我更喜欢选项#2。在此例中，您将应用 flex-wrap:wrap;属性，本质上告诉父级中的所有子级在没有足够的页面空间时换行到下一行。

.cards {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

选项2 我喜欢做媒体查询的组合，我发现它看起来更干净。

.cards {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media only screen and (min-width: 1000px) {
    .cards {
        flex-direction: row;
    }
}

如果您采用以下尺寸技巧，您的设计会看起来更干净：

1. 涂抹宽度：100%；到元素
2. 设置最大宽度：###em/px/etc.

这样你的元素会看起来更加均匀，并且会从小屏幕尺寸增长到最大屏幕尺寸。

在帮助实现更简洁的响应式设计的其他更改方面：

• 您可以使用 CSS 间隙属性代替元素周围的边距
• 我不知道有多少在元素上使用固定高度的充分理由。如果不删除 .card 中的固定高度，则文本将与其他元素重叠。如果你必须有固定的高度，你可以添加overflow-y: auto;控制它；但请注意，这不是很好的用户体验。