CSS，响应式 DIV

Question

我正在努力实现这样的目标：

1st 你必须知道它应该是全屏的，这就是我使用 % 的原因。

到目前为止，无论我的屏幕宽度如何，我只能让视频保持 16:9。我也能够创建两个浅蓝色 div，但它们不会自动适合视频和页脚之间的 space。

我也做了红色的div。

现在我想知道如何让蓝色的小 div 适合 space，因为现在它们根本没有出现，显示它们的唯一方法是设置一个固定的高，这不是我要找的。我也想知道如何为宽度屏幕制作第二个数字。

这是我的代码：http://codepen.io/EzhnoFR/pen/KNMBGO

<div id="aszone">
</div>

<div id="pbzone">

        <div id="pgzone">
            <video width="100%" preload="none" autoplay="true">
      <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
            <source type="video/mp4" src="http://brunotarhan.fr/intro.mp4" />

        </div>

        <div id="ppzone">

            <div id="pp1">  
            </div>

            <div id="pp2">
            </div>

        </div>

</div>

<div id="gzone">
</div>

html, body {
    margin: 0;
    padding: 0;
}

div{
    border: 0px solid black;
}

video{
    width:100%;  !important;
}

#aszone, #gzone{
    height: 10%;
    background-color: grey;
    background-size: cover;

}

#gzone{
  height: 10%;
  bottom: 0;
  position:absolute;
}

#pbzone{
  height: 50%;
    position: relative;

}

#ppzone{
    float: left;
    width: 100%;
  height: 50%;
}

#pp1{
    width: 50%;
  height: 150px;
    float: left;
    background-color: red;
}

#pp2{
    width: 50%;
  height: 150px;
    float:right;
    background-color: yellow;
}

#pgzone{

    background-image: url(screenfiles/bg.jpg);
    background-size: cover;
    border: 0px; !important
}

Answer 1

使用 Flex-box。如果你给所有蓝色的容器一个容器，并从 1 flex-direction: column; 更改为 2 flex-direction: row; 并为较浅的蓝色容器添加一个容器并更改相反的方式，你就会得到你想要的布局。

CSS，响应式 DIV

CSS, Responsive DIVs

html

css

responsive