特定寬度後對齊位移

我正在幫助將網站的端口連接到新服務器。所有這些都是繼承的代碼。一個例子頁面是這一個：http://fcxcobalt.fmi.com/products/特定寬度後對齊位移

此標題：

enter image description here

但在1690px和更高寬度的：如所期望

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

在屏幕寬度小於1690px標題對準元素左對齊文檔的主體。

航向自己的CSS可能不是問題，但它是

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

Unminified CSS可以看這裏：http://pastebin.com/s5MVMZVj

誰能告訴我爲這對準怎麼可以做出是否一致？

來源

2013-04-25 jerrygarciuh

你所看到的是在CSS媒體查詢的結果是：（！你估計1690px，以及斑點）

@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% 
    } 

}

在發生在1707px將交換機。

這是一個響應式設計的例子，我的猜測是設計師想要爲小屏幕保留一些左/右邊距，因爲margin: 0 auto會導致邊緣全部塌陷。

您的瀏覽器沒有任何問題，並且CSS按預期工作。

當然，對於一些人來說，這種急劇的轉變可能有點難看。

通過設置margin: 0 Mpx可以使其更平滑，其中M是可能接近（1707px - {頁面佈局寬度（px））/ 2的魔法像素數量，但您必須嘗試查看。

固定佈局毛刺的寬度大於1707px

我發現，如果我在下面的CSS代碼片斷離開了margin: 0 auto聲明中，「產品」的標籤保持它是假設。

我只在Firefox中測試過。

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

來源

2013-04-25 23:49:29

謝謝你的迴應！我可能沒有清楚說明我的問題 - 我希望將標題與菜單和頁面內容永久對齊。我猜測給定的結構，這將涉及針對所包含的跨度，但我對如何給它留下填充總是匹配的損失。 – jerrygarciuh 2013-04-26 00:22:50

@jerrygarciuh我重讀了你的問題，重新檢查了CSS，發現要查看佈局問題，你需要一個非常大的屏幕，而且我的筆記本電腦屏幕不夠寬。我看到了這個問題，我想我現在該如何解決這個問題，但明天早上還會回來。 – 2013-04-26 01:44:59

非常感謝你！我永遠不會找到它！ – jerrygarciuh 2013-04-27 03:20:32

特定寬度後對齊位移

回答

相關問題