放大或低分辨率（移动设备）时横幅被切断

Question

这个问题实际上也出现在一个人口稠密的网站 www.godaddy.com 上。当您放大或使用移动设备时，横幅的右侧会被截断。如果您在计算机上查看完整大小的页面，则没有问题。我的网站是：www.clinkstr.tk 这是 CSS 代码：

#pageTop {
    background:#006DD9;
    background-repeat: repeat-x;
    background-size: 100% 100%;
    background-position: 0 0;
    width: 100%;
    height: 50px;
    border: 0;
}

有些代码可能是不必要的，因为我反复尝试不同的方法来修复它。 此外，当您放大时，网站似乎有点混乱，并且事情开始变得不合适，例如浅灰色背景（假设是居中的）。有没有办法解决这个问题？

Answer 1

好吧，对于初学者来说，#pageTopWrap 将需要 max-width: 100% 或者 width: 1100px; 声明会使其每次都溢出。

事实上，对于很多东西，你已经用不灵活的像素声明了宽度。 width 非常严厉。您必须使用 max-width 声明覆盖每个。那个 iframe 也会引起一些头痛。如果您不介意处理被中断的事情，您可以将overflow:hidden; 放在#pageMiddle 上，这将强制该元素隐藏任何溢出它的内容（非常简单）。