html - 当较小的屏幕div无法拉伸(stretch)时

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        4年前关闭。
                                                                                            
                
        
当我要转到网站上的较小屏幕时，页眉和页脚的宽度不是100％。有人可以解释我发生了什么吗？

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

最佳答案

我假设您正在尝试使您的网站具有响应能力？您的.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%;
    }
}

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

关于html - 当较小的屏幕div无法拉伸(stretch)时，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33123890/