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

Question

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

 .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链接