如何让我的网页的这部分响应？

Question

以下是我制作的网页的链接：https://thawing-savannah-89995.herokuapp.com/ 这是我第一次使用PSD时没有帮助的网页。

这是我遇到问题的区域的SS，并在缩小浏览器大小时不断破坏。这种布局对我来说很难思考，我认为它不应该存在。我怎样才能更好地设计该部分的html和CSS？

Answer 1

在发表这篇文章时，我没有足够的代表发表评论。对不起，我愿意。

我建议在名为flexbox的css中使用一个东西。它需要一些额外的工作，而不是Bootstrap或960或其他东西，但与百分比单位相结合，如果你想成为新时代，甚至可能vh/vw。

This guide解释得比我希望的要好;基本上，它是一个动态对齐系统。与替代方案相比，定心是微不足道的。请记住，您可能需要一些@media断点，主要是更改flex-direction。

最近获得了almost（对不起IE）通用浏览器支持。如果您关心IE，请使用像flexibility这样的垫片。

如果您确实想使用类似引导程序的网格系统，那么如果您想查看它们，可以使用更好的alternatives。个人不是引导者的粉丝（不再......），但无论如何我想你的船漂浮。

Answer 2

我在创建自适应网站时学到的最好的教训是设计您希望如何在移动设备上查看这些内容并逐步升级到桌面。

我建议您使用Twitter Bootstap或Foundation以及下载响应式模板。阅读尽可能多的文章，您可以找到有关不同技术的文章，以帮助您最好地理解如何做到这一点的概念。