在順序媒體查詢中使用最大寬度和最小寬度的優點？

如果存在一系列明確的斷點和相關媒體查詢，並且每個媒體查詢都會更改相同的屬性，那麼添加max-width值和min-width值是否有優勢？在順序媒體查詢中使用最大寬度和最小寬度的優點？

例如是否有任何優勢，使用：

@media (min-width: 300px) and (max-width: 599px) { 
    color: red; 
} 
@media (min-width: 600px) and (max-width: 999px) { 
    color: blue; 
} 
@media (min-width: 1000px) { 
    color: green; 
}

而不只是：

@media (min-width: 300px) { 
    color: red; 
} 
@media (min-width: 600px) { 
    color: blue; 
} 
@media (min-width: 1000px) { 
    color: green; 
}

爲了澄清，我明白，我可以通過添加一個最小和最大寬度的目標範圍內，但是我指的是斷點是連續的並且基於寬度的情況。鑑於序列中的下一個值將覆蓋（王牌）前，是否有任何理由顯式聲明範圍。

來源

2014-12-05 Undistraction

指定min-width和max-width允許您創建相互排斥的規則塊。優點是您可以按任意順序指定媒體查詢。缺點是你需要更頻繁地重複CSS規則。例如：

/* order of media queries does not matter */ 
@media (max-width: 299px) { 
    #section-1 { display: none; } 
    #section-2 { display: none; } 
} 
@media (min-width: 300px) and (max-width: 599px) { 
    #section-1 { display: block; } 
    #section-2 { display: none; } 
} 
@media (min-width: 600px) { 
    #section-1 { display: block; } 
    #section-2 { display: block; } 
}

僅min-width或max-width指定允許您創建的規則塊，可以級聯跨多個斷點。優點是你可以用最少的重複來實際編寫CSS規則。缺點是媒體查詢需要按升序（最小寬度）或降序（最大寬度）排序，否則需要you run into WTFs。例如：

/* mobile first */ 
#section-1 { display: none; } 
#section-2 { display: none; } 
@media (min-width: 300px) { 
    #section-1 { display: block; } 
} 
@media (min-width: 600px) { 
    #section-2 { display: block; } 
}

/* desktop first */ 
#section-1 { display: block; } 
#section-2 { display: block; } 
@media (max-width: 599px) { 
    #section-2 { display: none; } 
} 
@media (min-width: 299px) { 
    #section-1 { display: none; } 
}

來源

2014-12-05 14:15:12

我認爲你對Q的回答比我的好*這個*。 – jbutler483 2014-12-05 14:21:04

從閱讀許多行業博客和我有寫我自己甚至博客文章，我們一般提供樣品，只有兩個條件：屏幕和最大寬度。例如：
@media only screen and (max-width: 640px) {...} 
該語句將包括一個屏幕（顯示器或裝置）和任何寬度小於640像素。混淆權利？特別是考慮到我們最近的電子郵件模板，我們使用了兩個斷點的組合。例如：
@media only screen and (max-width: 640px) {...} 
@media only screen and (max-width: 479px) {...} 
我沒有意識到這一點的時間，但在上面的例子中，第二媒體查詢居然勝過第一，由於標準的CSS繼承規則。按照權利，第一次觸發任何寬度小於 640px的設備，第二次觸發任何寬度小於479px的設備。所以如果你真的想要第一個，你需要確保在第二個條件下覆蓋所有的CSS屬性。

〜SOURCE

的，則返回 'device width' 是基於所述設備的方位。它不是基於設備可以在任何方向上支持的最高'可能尺寸'。

同樣，術語「最大寬度」是導致我最初混淆的原因。某些設備根據方向和/或縮放級別返回不同的值，其他設備返回相同的值。無論哪種方式，在任何給定時間只返回一個「寬度」值，它不是基於一系列值。

來源

2014-12-05 14:10:54 jbutler483

我不明白這是如何回答我的問題。我不是問'min-width'和'max-width'是做什麼或是什麼意思。 – Undistraction 2014-12-05 14:12:04

不，你是（IMO）問'爲什麼使用它們'。這（我感覺），給出了爲什麼的一般概述，因爲這意味着你可以通過使用範圍來應用它們，而不是'在xyz px'或'over abc px' – jbutler483 2014-12-05 14:15:15

其最大寬度的好處是，你不必後覆蓋樣式。在下面的示例中，600px-999px範圍的樣式可以按照想要的樣式進行樣式設置，而不用擔心必須從較小的媒體查詢中覆蓋css。媒體查詢的替代級聯不是這種情況。這取決於你喜歡做什麼。

@media (min-width: 300px) and (max-width: 599px) { 
    h1 { 
     color: blue; 
     font-size: 40px; 
     text-transform: uppercase; 
    } 
} 
@media (min-width: 600px) and (max-width: 999px) { 
    h1 { 
     font-size: 10px; 
     } 
}

此外，如果瀏覽器開發人員工具中沒有多餘的overrode樣式，它將更容易調試。

來源

2014-12-05 17:19:47

在順序媒體查詢中使用最大寬度和最小寬度的優點？

回答

相關問題