CSS/HTML 屏幕大小自适应块/图块

Question

我确定以前有人问过这个问题，但我不确定术语意味着我的搜索结果没有提供任何相关内容。

我想在我的页面中添加一些相同大小的内容块，它们应该按行和列组织，没有表格，并适应更大和更小的屏幕尺寸。图片示例：

是否有一种简单的跨浏览器非 JS 方式来执行此操作，无需刷新页面（适应更改屏幕大小，即调整大小）？

Answer 1

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

图像也可以通过使用 CSS 做出响应，如下所示：

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

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