1

我正在帮助将站点端口连接到新服务器。所有这些都是继承的代码。一个示例页面是这个:http: //fcxcobalt.fmi.com/products/

这个标题:

<h1 class="main-content-heading"><span class="wrapper">Products</span></h1>

在屏幕宽度小于 1690 像素时,标题会根据需要对齐:

在此处输入图像描述

但是在 1690px 和更高的宽度下,元素左对齐到文档的正文。

标题自己的 CSS 可能不是问题,但它是

.main-content-heading {
  margin: 0 0 1.2em;
  padding: 0.5em 0;
  font-weight: 300;
  color: #fff;
  background: #1c3f94;
  text-transform: uppercase;
}

未缩小的 CSS 可以在这里看到:http: //pastebin.com/s5MVMZVj

谁能告诉我如何使这种对齐保持一致?

4

1 回答 1

1

您在这里看到的是 CSS 中媒体查询的结果:

@media screen and (min-width:1707px){
    .wrapper,.page-head,.site-menu,.droplets,.wide-content{
        margin:0 auto
    }

}

@media screen and (max-width:1040px){
    .wrapper,.page-head,.site-menu,.droplets,.wide-content{
        margin:0 3%
    }

    .bx-aspect-wrapper{
        margin-bottom:-10em
    }

    .bx-pager{
        right:3%
    }

    .bx-slide-caption,.bx-prev,.bx-next{
        font-size:130%
    }

}

切换发生在 1707 像素(您估计为 1690 像素,很好看!)。

这是响应式设计的一个示例,我的猜测是设计师希望为较小的屏幕保留一些左右边距,这margin: 0 auto会导致边距一起折叠。

您的浏览器没有任何问题,并且 CSS 正在按预期工作。

当然,对某些人来说,急剧的过渡可能有点难看。

通过将margin: 0 MpxM 设置为可能接近 (1707px - {page layout width in px})/2 的神奇像素数,这可能会变得更平滑,但您必须尝试查看。

修复宽度大于 1707px 的布局故障

我发现如果我margin: 0 auto在下面的 CSS 片段中省略了声明,“产品”标签就会保留在它应该在的位置。

我仅在 Firefox 中对此进行了测试。

@media screen and (min-width:1707px){
    .wrapper,.page-head,.site-menu,.droplets,.wide-content{
       margin:0 auto
    }
}
于 2013-04-25T23:49:29.757 回答