如何仅用HTML和CSS实现小屏幕下响应式列布局（堆叠+100%宽度）

嘿，这事儿其实很容易解决，咱们用CSS的**媒体查询（Media Queries）**就能实现你要的响应式效果——在大屏幕保持双列，小屏幕自动堆叠成单列100%宽度。

核心思路 #

媒体查询允许我们根据设备的屏幕尺寸（比如宽度）来应用不同的CSS规则。我们只需要设定一个断点（比如常见的768px，你也可以根据需求调整），当屏幕宽度小于这个值时，把column-count改成1，同时确保容器宽度是100%。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  text-align: left;
  width: 100%; /* 确保容器默认占满宽度 */
}

/* 响应式断点：当屏幕宽度小于768px时应用 */
@media screen and (max-width: 768px) {
  .newspaper {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

关键说明 #

• 媒体查询规则：@media screen and (max-width: 768px) 表示当屏幕宽度≤768px时，里面的样式会覆盖之前的设置。你可以根据自己的需求调整这个断点值（比如改成600px适配更小的手机）。
• 前缀兼容：保留-webkit-和-moz-前缀是为了兼容一些旧版本的Chrome、Safari和Firefox浏览器，现代浏览器其实已经支持标准的column-count了，但加上前缀更稳妥。
• 宽度设置：默认给.newspaper加上width:100%，确保它在任何屏幕下都能占满父容器的宽度，避免出现不必要的留白。

这样修改后，你的布局在桌面端会保持双列，在手机等小屏幕设备上就会自动变成单列，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Sumit Kumar