当屏幕较小的div没有拉伸

-1

当我去一个小屏幕上我的网站，页眉页脚&不是宽度100％。有人能解释我发生了什么事吗？当屏幕较小的div没有拉伸

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

2015-10-14 Jelle Siderius

给定链路不是** **反应可能这就是为什么，一个快速的解决方案，您可以设置'最小宽度：1200像素;'你'body' – vivekkupadhyay

问题寻求帮助的代码必须包括必要的，以最短的代码在问题本身**中重现它**。尽管您已经提供了一个示例链接，但如果链接无效，那么您的问题对于其他未来具有相同问题的SO用户将没有任何价值。 –

我假设你正试图让你的网站响应？您的.container类具有适用的固定宽度。设置max-width将使其以较小的分辨率进行换行。

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

我会建议与媒体查询工作，如提及here，这样就可以在宽度在您的设计打破应用样式。

媒体查询会让你样式应用于特定的宽度。样式将级联一路下跌，直到最小/最大分辨率，相对于设备（视）宽度等于假，由最小/最大分辨率设置的条件不再满足。

一个例子是以下

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

不过，我强烈建议你看看所有详细解释的链接，这样你就可以设置正确的断点和样式自己。

来源

2015-10-14 11:29:57 Jason

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

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

来源

2015-10-14 11:24:02 Alex

因为它没有反应，然后添加'最大宽度：100％;'将折叠整个网站及其真的很痛苦，任何人浏览它，而不是，给予水平滚动仍然是有用的。 – vivekkupadhyay

@vivekkupadhyay没错。我只是回答这个问题，并想给他一些想法。 – Alex

我认为你要把它响应你可以用引导框架去它会很容易使它响应，或只是把CSS类做出来。

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

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

来源

2015-10-14 11:55:09

当屏幕较小的div没有拉伸

回答

相关问题