<分区>
html - CSS 中的列排列取决于目标设备
我目前正在开发一个网站，该网站必须完全响应并可在不同设备(台式机、移动设备等...)上访问。我只想拥有一个 HTML 标记，并且我正在使用媒体查询来实现不同类型的布局。
拥有干净的标记对我来说很重要，所以让我们开始吧。为了让事情更简单，我删除了所有不必要的东西。我有一个文章列表(-标签)。每篇文章的内容都是可变的，所以我无法确定一个固定的高度。我的目标是根据设备安排这些部分。例如:
在移动设备上只有 1 列，所有部分都在彼此下方。
我希望在平板电脑上有 2 列，因此 2 篇文章彼此相邻(见下图)。
在桌面上我想有 3 列...
我的标记看起来像这样，并且知道任何表示性的东西，如列等。如果我在标记中包含列(额外的标记，例如列 div)，我将没有任何机会根据目标设备更改布局.这意味着我会在“标记时间”修复布局/演示文稿。
<article>
<h1>Header<h1>
<p>Some text...</p>
</article>
<article>
<h1>Header<h1>
<p>Some text...</p>
</article>
<article>
<h1>Header<h1>
<p>Some text...</p>
</article>
<article>
<h1>Header<h1>
<p>Some text...</p>
</article>
<article>
<h1>Header<h1>
<p>Some text...</p>
</article>
我根本不是使用 CSS 的初学者:过去几天我几乎尝试了所有方法。
那么我怎样才能以典型的 2 栏布局排列文章呢？如果每篇文章的高度都一样，我会很轻松。 1列也完全没问题。 3 列比 2 列更难实现。
2 列所需的布局如下所示:
但是我在使用 float (float: left)时确实得到了这个结果
ms-grid 和 flexbox 无法替代，因为旧浏览器缺乏支持(我必须支持)。
最佳答案
我不完全确定您的要求以及它与典型的 CSS3 RWD 有何不同，但与它听起来的不同。您可以使用媒体查询在不同的屏幕分辨率之间响应您的布局。包括各种手机和平板；纵向和横向 View 。
下面是一个例子。
@media screen and (max-width: 480px) {
#leftbox {
margin-right: 100px;
}
}
查看此链接以供引用； http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
或者，您可以为每个分辨率加载一个具有全新布局的新样式表。
关于html - CSS 中的列排列取决于目标设备，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20156433/