CSS - 在电脑上分屏但堆叠在手机上

Question

我试图将我的页面拆分为4个相等的部分，而左上角我想要水平划分为2个部分。 我主要担心的是它将如何在移动设备上使用，我不希望它像在电脑上那样分开，我希望它能够被堆叠（在另一个上面阻塞）。如图中所述。 我想过自助网格，但我无法做到。 到目前为止我所拥有的是：

<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更改为class es以获得更好的可维护性。 （看起来你只有短的和高的相同宽度）。如果您单独设置每个样式（就像使用颜色一样），请离开id s。

• 我将两个较短的那个放在一个容器<div>中，这样它们就可以保持在一起，即使是漂浮物。

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

这是JSFiddle。

这是一个代码片段（尝试调整页面大小：在480px宽度下，它将被视为“移动”并调整大小，反之亦然）：

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>

Answer 2

使用bootstrap网格：
在您的页面中包含bootstrap.css并将此元标记包含在Groovy
中，网格代码将作为
<meta name="viewport" content="width=device-width, initial-scale=1.0">