引導佈局媒體查詢不能在767px在Chrome上工作

我的Bootstrap（v3.3.5）佈局css在767px的佈局樣式根本沒有被應用。引導佈局媒體查詢不能在767px在Chrome上工作

下面是在第3個瀏覽器的控制檯試驗後的行爲......

Chrome 
-window.innerWidth of <= 766 - correctly shows mobile layout 
-window.innerWidth of == 767 - incorrectly applies no layout styles 
-window.innerWidth of >= 768 - correctly shows full screen layout 

Firefox 
-window.innerWidth of <=766 and ==767 - correctly shows mobile layout 
-window.innerWidth of >=768 - correctly shows full screen layout 

Safari 
-behaves fine although window.innerWidth doesn't correctly correspond to the breakpoints (perhaps something to do with Safari not accounting for scrollbars in the same way)

我所有的媒體查詢已創建如下...

@media (max-width: 767px) { 
/*small view*/ 
} 
@media (min-width: 768px) { 
/*full view*/ 
}

我已經嘗試改變這些值，所以存在重疊（例如767px的最小寬度），但它沒有效果。如果這有點含糊不清，但我真的不知道該從哪裏去調查問題，並且發現只有一個與以前版本bootstrap類似行爲的報告（https://github.com/twbs/bootstrap/issues/1531）。

有誰知道任何可能的原因，我只能在Chrome上看到這個？無論哪種方式，任何適當的方式進行調查的建議將非常感激。

- 編輯 - 的研究小時後，我測試了這個簡單的文件...

<html> 
    <head> 
     <style> 
     @media (max-width: 767px) { 
      .headlineText { 
       font-size: 10px; 
       color: red; 
      } 
     } 
     @media (min-width: 768px) { 
      .headlineText { 
       font-size: 10px; 
       color: green; 
      } 
     } 
     </style> 
    </head> 
    <body> 
     <h1 class="headlineText">this is a headline</h1> 
    </body> 
</html>

在Chrome只 - 在767px文本既不綠色或紅色 - 它是黑色的，時代新羅馬，並大大超過10px。當然，我不能通過上傳到小提琴/ codepen來複制 - 所以它必須與我在本地主機上運行的事實（通過MAMP）有關。絕對爲零的想法爲什麼會這樣，但至少它似乎不會影響我在現場環境中的東西

來源

2017-02-11 d3wannabe

使這個完整的屏幕，並調整您的窗口。它適用於我在Chrome瀏覽器，並沒有顯示「不起作用」之間。

.works { 
 
    display: none; 
 
} 
 
.does-not-work { 
 
    display: block; 
 
} 
 
@media(max-width:767px){ 
 
    .works { 
 
    display: block; 
 
    } 
 
    .works::before { 
 
    content: 'max-width: 767px | '; 
 
    } 
 
    .does-not-work { 
 
    display: none; 
 
    } 
 
} 
 
@media(min-width:768px){ 
 
    .works { 
 
    display: block; 
 
    } 
 
    .works::before { 
 
    content: 'min-width: 768px | '; 
 
    } 
 
    .does-not-work { 
 
    display: none; 
 
    } 
 
}

<span class="works">works</span> 
 
<span class="does-not-work">does not work</span>

側面說明，基於評論：大約一年前，我曾與一個巨大的網站同樣的問題。一支6年的團隊成果近兩年。代碼從四面八方涌入。我是一個粘在一起的前端，確保一切正常。你可以想象@media查詢是一團糟。我只通過使用移動優先原則重構所有查詢來擺脫錯誤 - 我使用Bootstrap's exact order將所有@media的組合在一起。爲我修好了。直到今天，我不知道是什麼原因造成的。（之前）（精確地）768px和992px（稍微）被打破。

來源

2017-02-11 20:39:22

謝謝安德烈 - 那也適合我。我猜這個問題是bootstrap加Chrome的組合，類似於我發佈的github問題鏈接。我不能在不使用引導程序的情況下複製問題，但很難與您分享整個過程，而無需經過漫長的過程，將我的項目簡化爲易於在小提琴上理解的東西 – d3wannabe

從您所描述的內容中聽起來更像這是你的CSS文件中的「錯字」。可能是一個未關閉的@ @ media'查詢，缺少分號，可能來自許多原因。你可以做的最好的事情就是創建一個新的'stylesheet'並複製粘貼現有CSS的塊。您將能夠確定何時傳輸錯誤並希望找到它。或者你可以使用一個驗證器，但每次都不起作用。我個人依靠我的IDE能夠警告我的代碼可能存在的任何問題。在你問之前，我是一隻恐龍：我使用'phpStorm'。 'webStorm'是現代對手 - 同一家公司。 –

謝謝安德烈 - 我想我必須嘗試 - 還有一點要指出 - 如果我更改我的設置，以便我有一個最大寬度：768px和最小寬度：768px問題在Chrome中消失，但我得到在Safari和Firefox中同樣的事情，在斷點處沒有應用樣式 - 非常令人沮喪，但我認爲我將不得不花費一些高質量的時間來完成所有的CSS：| – d3wannabe

引導佈局媒體查詢不能在767px在Chrome上工作

回答

相關問題