html - 为什么我的页面宽度不适合所有分辨率

Question

大家好，我有 2 台显示器，其中一台分辨率为 1920x1080，另一台分辨率为 1440x900。我正在做一个网站，但该网站不适合 1440x900 为什么会这样？我在宽度上使用 %，所以我认为它必须适合，但事实并非如此。我缺少什么你能帮帮我吗？

1920x1080 截图

1440x900 截图

我正在使用 CSS 网格来组织页眉、 slider 显示、页脚等，但我在页眉、 slider 显示等内部使用 flexbox。

CSS的一小部分

body{
display: grid;
grid-template-rows: 60px repeat(4, 1fr);
}

.header {
width: 100%;
height: 60px;
display: flex;
background-color: #009eb3;
}

.inner_header {
width: 100%;
height: 100%;
display: flex;
position: relative;
justify-content: space-between;
margin-left: 3%;
margin-right: 3%;
}

编辑:这是 jsfiddle ( https://jsfiddle.net/tcwaypq4/4/ ) 我不知道这个网站，抱歉。我将我的 body 显示更改为 flex 。

Answer 1

您应该对您的元素进行一些更改，以便它们不会超出页面。

.informative-menu {
    width: 100%;
}
.info-boxes {
    margin-left: 0;
    margin-right: 0;
    width: 33.3%;
}
.icon-desc-spans {
    width: 100%;
}
.icon-desc-spans {
    width: 100%;
    word-break: break-all;
}

然后，您必须使底部图像具有响应性(例如:width: 50%;)。