响应“棋盘”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”，这可能会对您有所帮助。