如何使网页的这一部分具有响应性？ [关闭]答案

【问题标题】：How can I make this section of my webpage responsive? [closed]如何使网页的这一部分具有响应性？ [关闭]
【发布时间】：2017-02-20 12:09:45
【问题描述】：

这是我创建的页面的链接：https://thawing-savannah-89995.herokuapp.com/ 这是我在没有帮助的情况下仅使用 PSD 制作的第一个网页。

这是我遇到问题的区域的 SS，当我缩小浏览器尺寸时会不断损坏。这种布局让我很难思考，我认为它不应该如此。我怎样才能更好地设计该部分的 html 和 CSS？

【问题讨论】：

嗯，解释太多了。第一的。恭喜。它看起来比我的第一个设计好得多。查看getbootstrap.com，尤其是getbootstrap.com/css/#grid，这一切都与拥有一个CSS网格系统有关，它可以根据您的屏幕宽度重新排列您的网站。此外，您通常会隐藏在小屏幕上看起来不好看的内容，或者使用较短的版本调整您的内容/文本。
我的建议是找到一个现有的响应式框架（想到 Bootstrap/Foundation）并据此构建您的 HTML。确定设计中的不同部分以及它们如何与所选框架中定义的元素相对应，然后编写代码 - 从头开始构建响应式布局比尝试将其应用于现有代码要容易得多。

【解决方案1】：

在发布这篇文章时，我没有足够的代表发表评论。对不起，如果可以的话，我会的。

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

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

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

如果您确实想使用类似引导程序的网格系统，有更好的alternatives，如果您想研究它们。个人不喜欢 bootstrap（不再......），但我想不管你的船是什么。

【讨论】：

【解决方案2】：

我从创建响应式网站中学到的最好的一课是设计您希望它在移动设备上的外观，并按照自己的方式在桌面上运行。

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

【讨论】：