html - 自定义 CSS 布局的问题

Question

我正在为一个元素编写模板，但遇到了一个问题。 我想得到这样的模板:

每个矩形应该是 16/9。 左上角有一个主矩形，周围有一个较小的矩形。一切都必须是响应式的，可能我不会使用任何框架(我也想与 IE9+ 兼容)。 到目前为止，这就是我设法做到的(有一个指向 Codepen 的链接):

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}
/* Grid */

.grid {
  display: block;
  background: black;
}
/* Clearfix */

.grid:before,
.grid:after {
  content: "";
  display: table;
  line-height: 0;
}

.grid:after {
  clear: both;
}
/* Unit */

.unit {
  width: 100%;
  float: left;
}
/* Dimensions */

.whole {
  width: 100%;
}

.half {
  width: 50%;
}

.two-thirds {
  width: 66.6665%;
}

.one-third {
  width: 33.3332%;
}

.one-quarter {
  width: 25%;
}

.three-quarters {
  width: 75%;
}
/* Gutters */

.unit {
  padding: 2.5px;
}

.no-gutters {
  padding: 0;
}

.no-left-gutters {
  padding-left: 0;
}

.no-right-gutters {
  padding-right: 0;
}
/* Content */

.content {
  position: relative;
  background-color: gray;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 */
}

.content div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/* Responsive Stuff */

@media screen and (max-width: 500px) {
  .unit {
    width: auto;
    float: none;
  }
}
/* Specific CSS */

.container {
  position: relative;
}

.containers > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.player {
  background-color: red;
}

    <div class="grid container">
  <div class="unit three-quarters no-right-gutters">
    <div class="unit whole">
      <div class="content player">
        <div>Player</div>
      </div>
    </div>
    <div class="grid">
      <div class="unit one-third">
        <div class="content">
          <div>Thumb</div>
        </div>
      </div>
      <div class="unit one-third">
        <div class="content">
          <div>Thumb</div>
        </div>
      </div>
      <div class="unit one-third">
        <div class="content">
          <div>Thumb</div>
        </div>
      </div>
    </div>
  </div>
  <div class="unit one-quarter no-left-gutters">
    <div class="unit whole">
      <div class="content">
        <div>Thumb</div>
      </div>
    </div>
    <div class="unit whole">
      <div class="content">
        <div>Thumb</div>
      </div>
    </div>
    <div class="unit whole">
      <div class="content">
        <div>Thumb</div>
      </div>
    </div>
    <div class="unit whole">
      <div class="content">
        <div>Thumb</div>
      </div>
    </div>
  </div>
</div>

我做错了什么？我的方法错了吗？

编辑:已解决 http://codepen.io/Mulder90/pen/KVKMKO :)

Answer 1

这是另一种方法(您可以通过更改浏览器窗口的尺寸来测试):

function resizeGrid() {

var grid = document.getElementsByClassName('grid')[0];
var gridWidth = grid.offsetWidth;
var gridHeight = grid.offsetHeight;

if (window.innerHeight < window.innerWidth) {
gridHeight = window.innerHeight;
grid.style.height = gridHeight + 'px';
gridWidth = ((gridHeight / 3) * 4);
grid.style.width = gridWidth + 'px';
}

if (window.innerWidth < window.innerHeight) {
gridWidth = window.innerWidth;
grid.style.width = gridWidth + 'px';
gridHeight = ((gridWidth / 4) * 3);
grid.style.height = gridHeight + 'px';
}

}

window.addEventListener('load',resizeGrid,false);
window.addEventListener('resize',resizeGrid,false);

body, .grid {
background-color: rgb(0,0,0);
}

.grid {
position: absolute;
top: 0;
}

.unit {
float: left;
border: 2px solid rgb(0,0,0);
box-sizing: border-box;
}

.one-quarter {
width: 25%;
height: 25%;
background-color: rgb(127,127,127);
}

.three-quarters {
width: 75%;
height: 75%;
background-color: rgb(255,0,0);
}

.grid, .content, .content > div {
width: 100%;
height: 100%;
}

<div class="grid">

<div class="unit three-quarters">
<div class="content player">
<div>Player</div>
</div>
</div>


<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

</div>