twitter-bootstrap - CSS - 在电脑上分屏但在移动设备上堆叠

Question

我想将我的页面分成 4 个相等的部分，我想将左上角水平分成 2 个部分。我主要关心的是它在移动设备上的表现，我不希望它像在 PC 上那样被拆分，我希望它被堆叠起来( block 在另一个上面)。如图所示。我想过 Bootstrap 网格，但我做不到。到目前为止，我所拥有的是:

<style>
html, body { height:100%; margin:0; padding:0 }
div { position:fixed; width:50%; height:50% }
#NW { top:0;   left:0;   background:orange  }
#NE { top:0;   left:50%; background:blue    }
#SW { top:50%; left:0;   background:green   }
#SE { top:50%; left:50%; background:red     }    ​
</style>
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>​
<div id="SW"></div>

我希望 div 占据屏幕高度和宽度的 100%。 (使用 Bootstrap 我在执行此操作时遇到了问题)

Answer 1

注意:我不熟悉 Bootstrap，所以这可能不像使用它的示例那么简单。这是一个普通的 CSS 示例。

---

你可以用 CSS 做到这一点 media queries .

注意事项:

• 我更改了 id s 至 class es 以获得更好的可维护性。 (看来你只有相同宽度的短款和高款)。如果您要单独设计每个样式(就像您对颜色所做的那样)，则保留 id

• 我把两个较短的放在一个容器里<div>这样他们就可以待在一起，即使有一个花车也是如此。

• 正如@shirfy 在下面提到的，始终将桌面样式放在媒体查询中以提高移动加载速度。这就是所谓的移动优先网页设计。

这是一个 JSFiddle .

这是一个代码片段(尝试调整页面大小:在 480 像素宽度以下它将被视为“移动”并调整大小，反之亦然):

div {
    width: 100%;
    float: left;
    display: inline-block;
    box-sizing: border-box;
}
div.container > div {
    width: 100%;
}
div.short {
    height: 100px; 
}
div.tall {
    height: 200px;
}
/* media query CSS */
@media screen and (min-width: 480px) {
    /* Notice how this is the desktop style */
    div {
        width: 50%;
    }
}
/* These styles are for coloring - ignore them */
div.container > div:nth-of-type(1) { background-color: #ffdddd; }
div.container > div:nth-of-type(2) { background-color: #ffddff; }
body > div:nth-of-type(2) { background-color: #ffffdd; }
body > div:nth-of-type(3) { background-color: #ddffdd; }
body > div:nth-of-type(4) { background-color: #ddddff; }

<!-- Note this container class -->
<div class="container">
  <div class="short">div1</div>
  <div class="short">div2</div>
</div>
<div class="tall">div3</div>
<div class="tall">div4</div>
<div class="tall">div5</div>