当较小的屏幕div不伸展时

Question

当我要在我的网站上使用较小的屏幕时，标题＆amp;页脚宽度不是100％。有人可以解释一下发生了什么吗？

我的意思是身体被切断......

Answer 1

我认为你正在尝试使其响应，你可以使用bootstrap框架，它很容易使其响应或只是通过放入css类来实现它。

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

并使用页眉和页脚制作宽度：auto;如果可能的话，它应该适合窗口大小。

Answer 2

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

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

Answer 3

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

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

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

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

一个例子是以下

/* 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%;
    }
}

但是，我强烈建议您查看详细解释所有内容的链接，这样您就可以自己设置正确的断点和样式。