Question

我正在撰写一个包含HTML和CSS的网站。我的问题是，当我在浏览器中运行我的网站时，我用百分比调整所有边距。但是当我全屏运行我的浏览器或者如果我调整窗口的大小时，网站的不同部分就会崩溃，并且不适合它们。为什么百分比单位不能解决这个问题，因为它与窗口的大小有关？

CSS：

#aboutMeDiv
{
    background-image: url('noisyBlue.png');
    position: absolute;
    width: 100%;
    height: 118px;
    margin-top: 13.6em;
    margin-left: -0.7%;
    opacity: 0.5;
    transition: opacity 0.3s;
}

即使窗口发生变化，如何以“相同的方式”制作？谢谢！

Answer 1

如果不查看代码，则无法给出更准确的答案，但可以通过向容器元素添加min-width和max-width来解决此问题。

例如，如果宽度小于700px且大于1500px时结构似乎分崩离析，则可以使用：

.container {
    max-width: 1500px;
    min-width: 700px;
}

当然，这可能会抑制响应式设计 - 尤其是对于移动浏览器。查看一些已经制作的CSS框架（如Twitter Bootstrap和Gumby Framework）可能是个好主意。

编辑以下问题的代码：

即使窗口发生变化，如何以“相同的方式”制作？谢谢！

如果您希望#aboutMeDiv“以相同的方式”，即使窗口大小发生变化，您也应该使用具体数字而不是div大小的百分比;即将width: 100%;更改为width: 700px;之类的内容。然后，如上所述，您可以使用min-width来确保屏幕显示div中的所有内容。

使网站适应所有显示尺寸 - HTML

1 个答案: