在引导程序中居中大屏幕的主容器

Question

我正在html5xcss3.com 获取现有的免费模板 Jessicawhite

我注意到图像在任何屏幕和大屏幕（例如 MAC 宽屏）中都可以 100% 拉伸，看起来真的很难看，尤其是主页滑块。

如果屏幕大于我的图像的最大尺寸（1280 像素，在服务器中大小），我想将整个页面/正文居中，就像在这个网站中一样：igihe.com 我尝试使用 bootstrap-responsive.css。它处理的最高屏幕是 1200px min.

@media (min-width:  1200px) {

}

我的尝试是最小 1400 像素的屏幕：

  @media (max-width:  1200px) {
  //leave original intact
   }

   @media (min-width:  1400px) {
   body {width:1366px; margin:0 auto;}
   /* OR */
   .body_container {width:1366px; margin:0 auto;}
   }

同样，我只是尝试将 min-width:1200px 更改为 min-width:1400px 但它的表现也不好。

我的问题是：它没有正确反应。我的屏幕尺寸是 1366px，小于 1400px，但它应用了 body 样式。

我需要在文字后将每种媒体下的所有规格添加到每种屏幕尺寸吗？意思是， min-width:1200px 包含一堆规范。这是否意味着每个屏幕尺寸都必须定义它？

有没有考虑到菜单的更短的解决方案？

Answer 1

您可以只使用简单的 css3。 使用包装器划分来包装所有元素，并且此包装器具有 display:none;默认情况下适用于所有宽度的媒体。

.wrapper{
     display:none;
     width:your-width-num px;
     margin-right:auto;
     margin-left:auto;
}

对于更宽的屏幕：

@meida(min-width:your-width-num) {
     .wrapper{
     display:block;
     }
}