响应式“棋盘格”div - HTML/CSS

Question

我必须制作一个棋盘主页，其中包含几个包含图片和文本的 div。 我做了这样的事情：

在 CSS 中，所有块都以绝对位置和一些顶部、左侧属性（以 px 为单位）放置。

设计是正确的，但我想让这一切都具有响应性，但有两种不同的方式： 1 - 使所有正文适应屏幕并最终增加 font-size 属性。 2 - 只需对齐两列或一列中的所有块（例如智能手机）

我不想要一个现成代码的答案，只是帮助实现我的主页的响应版本。

Answer 1

您应该真正考虑使用 CSS 框架，而不是依赖绝对定位，这很难适应多种屏幕尺寸并做出响应。

虽然在第一次尝试使用 CSS 框架时存在学习曲线，但它很快就会获得回报，尤其是考虑到跨浏览器和响应式设计的考虑因素时。

可能最流行的 CSS 框架是 Bootstrap，默认情况下它是响应式的，并且会使您的布局相对简单。

CSS 框架的另一个不错的选择是Foundation。

还有无数其他的。这是一个列表：http://usablica.github.io/front-end-frameworks/compare.html

Answer 2

我曾经用浮动列来实现响应式，并通过媒体查询来改变列的宽度。但是在您的工作中，您应该更改希望包装器的宽度并通过 js 重置列的左侧和顶部。可以参考插件'Masonry'，或许对你有帮助。