1

我目前正在开发一个必须在不同设备（桌面、移动设备等）上完全响应和可访问的网站。我只想拥有一个 html 标记，并且我正在使用媒体查询来实现不同类型的布局。

对我来说，有一个干净的标记很重要，所以让我们开始吧。为了让事情变得更容易，我删除了所有不必要的东西。我有一个文章列表（-tags）。每篇文章的内容都是可变的，所以我无法确定一个固定的高度。我的目标是根据设备安排这些部分。例如：

1）在移动设备上只有 1 列，所有部分都在彼此下方。

2）在平板电脑上，我想有 2 列，所以 2 篇文章彼此相邻（见下图）。

3）在桌面上我想要3列......

我的标记看起来像这样，并且知道任何表示性的东西，如列等。如果我在标记中包含列（额外的标记，例如使用 column-divs），我将没有机会根据目标设备更改布局。这意味着我会在“标记时间”修复布局/演示文稿。

<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 列所需的布局如下所示：

所需的 2 列布局

但是在使用浮点数时我确实得到了这个结果（浮点数：左）

左浮动

由于旧浏览器缺乏支持（我必须支持），ms-grid 和 flexbox 是无可替代的。

最好提前感谢！

4

2 回答 2

0

只是为了澄清我的问题：

我确实知道如何处理媒体查询。问题仅限于如何安排如图所示的文章。

于 2013-11-23T05:38:49.860 回答
0

我不完全确定您的要求是什么，以及它与典型的带有 CSS3 的 RWD 有何不同，但与听起来的不同。您可以使用媒体查询来响应不同屏幕分辨率之间的布局。包括各种手机和平板电脑；肖像和风景。

下面是一个例子。

@media screen and (max-width: 480px) {
   #leftbox { 
     margin-right: 100px;
    }
}

查看此链接以供参考；http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

或者，您可以为每个分辨率加载一个具有全新布局的新样式表。

于 2013-11-23T05:23:40.007 回答