CSS/HTML屏幕大小自适应块/平铺

Question

我肯定之前有人问过这个问题，但我不确定这个术语意味着我的搜索结果没有得到任何相关的结果。

我想向我的页面添加一些相同大小的内容块，它们应该以行和列的形式组织，而不是表格，并适应更大和更小的屏幕尺寸。图片中的示例：

​

有没有一种简单的跨浏览器的非JS方式来做到这一点，它不需要刷新页面(适应于改变屏幕大小，即调整大小)？

Answer 1

这种技术被称为响应式网页设计。您可以创建一个四列的页面布局，其中包含四个div列，每个列的宽度为23% (加起来略低于100%)。您将需要学习HTML和CSS，然后响应式网页设计。网上有很多帮助。

还可以通过使用CSS来响应图像，如下所示：

​

img { 
          max-width: 100%;
          height: auto;
 }

​

您还可以选择学习Bootstrap框架，它是一个用于创建响应式网站的HTML框架，可用于创建响应式4栏设计。