html - CSS/HTML 屏幕尺寸自适应 block /图 block

Question

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

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

是否有一种简单的跨浏览器非 JS 方法可以做到这一点，无需刷新页面(自适应改变屏幕尺寸，即调整大小)？

Answer 1

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

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

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

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