CSS / HTML屏幕大小的自适应块/瓦片

时间:2016-12-22 16:01:35

标签: html css layout css-float

我确定之前已经问过这个问题,但我不确定这个术语是否意味着我的搜索结果没有提出任何相关内容。

我想在页面中添加一些相同大小的内容块,它们应按行和列组织,不带表格,并适应越来越大的屏幕尺寸。图片示例:large-width screen small-width screen

是否有一种简单的跨浏览器非JS方式,无需刷新页面即可正常工作(适应不断变化的屏幕大小,即调整大小)?

1 个答案:

答案 0 :(得分:0)

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

图像也可以通过使用CSS进行响应,如下所示:

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

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