使用CSS @media根據設備而不是寬度

我知道如何使用@media就能根據最大寬度的特定設備，像這樣使用CSS @media根據設備而不是寬度

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
    } 
}

但有基於設備的快捷方式做到這一點，像這樣

@media screen and (min-width: small) { 
    body { 
     background-color: lightgreen; 
    } 
} 


@media screen and (min-width: medium) { 
    body { 
     background-color: black; 
    } 
}

來源

2017-08-07 puk

這將打開一罐蠕蟲。什麼被認爲是「小」還是「中」？如果你能回答這個問題，你可以在通常的'@ media'查詢中使用這些維度。 – fubar

您可能不能，除非設備具有獨特的功能。這不是媒體查詢是專爲 – Raptor

設計的每個規則總是有例外，但具有特定大小「類別」的設備通常會共享您可以定位的某些次要特性，例如[Interaction Media Features]（https：// drafts.csswg.org/mediaqueries-4/#mf-interaction）或[指向設備質量：指針功能]（https://drafts.csswg.org/mediaqueries-4/#mf-interaction） –

是有，使用CSS預處理，如薩斯，你可以這樣做：

$small: 480px; 
$medium: 720px; 

@media screen and (min-width: $small) { 
    body { 
     background-color: lightgreen; 
    } 
} 


@media screen and (min-width: $medium) { 
    body { 
     background-color: black; 
    } 
}

來源

2017-08-07 05:33:15

我看到你關於媒體查詢的問題，我曾經想過同樣的問題。然而，在我看來，fubar和Raptor在他們的答案中是正確的。

這就是說，我想指出一種使用媒體查詢的方法，我個人認爲它可能是更通用的方法之一。

我個人認爲，使用Google Chrome的開發人員工具，並逐漸縮小屏幕大小，以查看您的網站某些方面看起來尷尬或簡單的中斷，注意這些屏幕尺寸，然後在這些斷點處編寫媒體查詢可能是讓您的網站在各種屏幕尺寸上都看起來很好的最佳方式。

從我個人的經驗來看，一旦我開始過度關注具體的設備尺寸，特別是在處理Android和蘋果產品的不同屏幕尺寸時，我不得不停下整條產品線去釘釘不同類別的屏幕尺寸。這使得代碼可以變得匆忙地變得複雜！

我知道這個答案沒有特定的代碼，可以被認爲比開發聖經的事實更多的意見，但我強烈地感到，我所描述的方法是那個（特別是如果你不太經驗，是沒有意識到各種類型的移動設備屏幕尺寸/分辨率）將產生最通用的結果。

我希望能幫助puk。如果您或任何人有不同的意見或想提出相反的意見，請隨時提出。我沒有聲稱知道一切，總是渴望學習新的東西，方法和觀點！

來源

2017-08-07 02:40:52

嘿fubar ...關於檢查Bootstrap和基金會以查看他們的斷點的絕佳建議！呃......我希望我能想到這個！ :) –

使用CSS @media根據設備而不是寬度

回答

相關問題