html - 如何使 DIV 元素响应屏幕分辨率

Question

我正在尝试创建包含 3 个部分的元素 div，使用 2 行和 2 列。

.flex-row {
    flex-direction: row;
    display: flex;
    width: 310px;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-body {
    display: flex;
    margin: 40px 10px 0px 0px;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 260px;
    width: 764px;    
}

<div class="flex-body">
  <div class="flex-row">
    <div style="background: #0980cc;"></div>
  </div>
  <div class="flex-column">
    <div style="background: #09cc69;"></div>
    <div style="background: #cc092f;"></div>
  </div>
</div>

我设置宽度是因为如果我不这样做，宽度将不适合页面。

但是 div 没有响应。我已经尝试过但没有任何效果。如何让我的 div 响应屏幕分辨率？

Answer 1

我刚刚创建了一个使用百分比的版本:

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.flex-body {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 40px;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 50%;
    position: relative;
    box-sizing: border-box;
}

.flex-row {
    flex-direction: row;
    display: flex;
    width: 35%;
    background-color: #0980cc;
}

.flex-column {
    flex-direction: column;
    display: flex;
    width: 65%;
}

.flex-column div:nth-child(1) {
    background: #09cc69;
    width: 100%;
}

.flex-column div:nth-child(2) {
    background: #cc092f;
    width: 100%;
}

jsfiddle link