我應該如何處理979和1200之間的MQ？

所以，我只是進入響應式設計和與之相關的任何事情。大多數情況下，我正在研究Twitter Bootstrap，因爲它使用的是LESS，而且我一直使用LESS作爲CSS框架。我應該如何處理979和1200之間的MQ？

而且我發現這個媒體查詢寬度，他們正在使用：

// Landscape phones and down 
@media (max-width: 480px) { ... } 

// Landscape phone to portrait tablet 
@media (max-width: 767px) { ... } 

// Portrait tablet to landscape and desktop 
@media (min-width: 768px) and (max-width: 979px) { ... } 

// Large desktop 
@media (min-width: 1200px) { ... }

但是我有一個問題，我測試的行爲，979px和1200px之間會發生什麼？因爲如果我不添加任何東西，另一個媒體查詢，所有我的元素在窗口大小調整或這兩個值之間的寬度上寬鬆。

我應該添加其他東西還是有東西我失蹤？

來源

2012-05-04 Roland

它們不能在980 - 1199範圍內使用任何特殊造型。這是我真正想到的唯一的事情。如果你想設計這個範圍，定義它就沒有什麼壞處。在您的響應式學習曲線中，請看看DARL（設備不可知響應式佈局）。 – Lowkase

也許:)我爲980及以上版本添加了樣式，以確保:)因爲例如我的第一臺筆記本電腦的寬度爲1024px，所以可能有很多設備在那個寬度。 – Roland

聽起來不錯。我再次鼓勵您閱讀Device Agnostic Responsive Layout。爲特定設備設置斷點是一場失敗的戰鬥。使用DARL，該方法是設置涵蓋設備類型（手機，平板電腦，桌面）的範圍，並讓用戶界面擴展以滿足該範圍。 – Lowkase

整個網頁就會飛散，看起來怪異，你必須配置你的CSS爲

來源

2012-05-04 17:12:35 spiderman

的確，這就是我所說的它發生了，所以我從這一點上添加了另一個媒體查詢。 – Roland

我遲到了這麼久，但我會解決引導的響應電網的一部分了。

如果有人感興趣，我添加了一個新的LESS文件和一些變量。

variables.less（在好地方電網部分添加它）

// basic grid 
// 980px-1199px 
@gridColumnWidth980:  56px; // Feel free to modify this value ! 
@gridGutterWidth980:  24px; // Feel free to modify this value ! 
@gridRowWidth980:   (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1)); 

// Fluid grid 
// 980px-1199px 
@fluidGridColumnWidth980:  percentage(@gridColumnWidth980/@gridRowWidth980); 
@fluidGridGutterWidth980:  percentage(@gridGutterWidth980/@gridRowWidth980);

新文件：響應-980px-1199px.less

// Responsive: Small desktops 
// -------------------------------------------------- 


@media (min-width: 980px) and (max-width: 1199px) { 

    // Fixed grid 
    #grid > .core(@gridColumnWidth980, @gridGutterWidth980); 

    // Fluid grid 
    #grid > .fluid(@fluidGridColumnWidth980, @fluidGridGutterWidth980); 

    // Input grid 
    #grid > .input(@gridColumnWidth980, @gridGutterWidth980); 

    // No need to reset .thumbnails here since it's the same @gridGutterWidth 

}

然後，只需導入新文件無反應的文件！

// Small desktops 
@import "responsive-980px-1199px";

網格不應該在980px和1199px之間變寬。

來源

2013-03-26 10:16:43

最簡單的解決方案：將@media（min-width：1200px）從1200px改爲980px。

只要min-width：1200px規則在您的網站上的980px窗口中工作，它適用於我的。只要您不介意在每次更新Bootstrap時進行更改，您都可以將其放入.less文件或更改Bootstrap css文件。希望他們能夠在未來的更新中解決這個問題。

來源

2013-06-12 16:06:21 Joe

我應該如何處理979和1200之間的MQ？

回答

相關問題