当较小的屏幕 div 未拉伸时

Question

当我要在我的网站上使用较小的屏幕时，header 和页脚的宽度不是 100%。谁能给我解释一下这是怎么回事？

我的意思是 body 被切断了...

Answer 1

您的网站不适合移动设备，但您问题的答案是：

.container {
    margin: 0 auto;
    width: 1170px;
    //Add max-width
    max-width: 100%;
}

Answer 2

我假设您正在尝试让您的网站响应？您的 .container class 应用了固定宽度。设置 max-width 会使其以较小的分辨率换行。

.container {
    margin: 0 auto;
    width: 1170px;
    max-width: 100%;
}

我建议使用媒体查询，如前所述 here，这样您就可以在设计中断的宽度处应用样式。

媒体查询可让您将样式应用于特定宽度。样式将一直向下级联，直到与设备（视口）宽度相关的 min/max 分辨率等于 false，并且不再满足 min/max 分辨率设置的条件。

示例如下

/* Mobile first CSS would come before
   the media queries below */ 

@media only screen and (min-width: 480px) {
    .services .service {
        width: 100%;
        margin-bottom: 25px;
    }
    .services .service + .service {
        margin-left: 0;
    }
}
@media only screen and (min-width: 720px) {
    .services .service {
        width: 50%;
    }
}
@media only screen and (min-width: 1170px) {
    .services .service {
        width: 23%;
        margin-bottom: 0;
    }
    .services .service + .service {
        margin-left: 2.66%;
    }
}

但是，我强烈建议您查看link，其中对所有内容进行了详细说明，这样您就可以自己设置正确的断点和样式。

Answer 3

我认为您正在尝试使其具有响应性，您可以使用 bootstrap 框架使其具有响应性，或者只需放置 css class 即可轻松实现。

.container {
    margin: 0 auto;
    width: 1170px;
    max-width: 100%;
}

并使用页眉和页脚设置宽度 :auto;如果可能的话，它应该适合 window 尺寸。

当较小的屏幕 div 未拉伸时

When smaller screen div's are not stretching

html

css

width