@media在課前或課後查詢？

我想知道哪些是媒體查詢的最佳做法。@media在課前或課後查詢？

如果你的目標的屏幕尺寸一般我會做這樣的事情：

section#about { 
    background-color: yellow; 
    color: black; 
    padding: 5px 20px; 

    @media (max-width: 600px) { 
    padding: 0; 
    } 
} 

.button-small { 
    margin-bottom: 12px; 

    @media (max-width: 600px) { 
    margin-bottom: 6px; 
    } 
}

將如下面的更好：

section#about { 
    background-color: yellow; 
    color: black; 
    padding: 5px 20px; 
} 

@media (max-width: 600px) { 
    section#about { 
    padding: 0; 
    } 
} 

.button-small { 
    margin-bottom: 12px; 
} 

@media (max-width: 600px) { 
    .button-small { 
    margin-bottom: 6px; 
    } 
}

代替嵌套查詢@media類內，你會創建一個獨立的@media查詢並添加您需要更改的類？

注：對不起，我正在使用預處理器（SASS）。我正在考慮組織代碼易讀性的方法。

來源

2016-04-19 Wasabi Developer

我總是覺得你不要在媒體查詢中嵌套媒體查詢。 –

你的方法有很多重複。爲什麼不僅僅聲明一次媒體查詢？ – LDJ

在純CSS中，媒體查詢不能像這樣嵌套。只有CSS預處理器允許你這樣做。 CSS預處理器本身將採用示例1中給出的代碼（無效的CSS），並將其轉換爲類似於示例2（有效的CSS）的內容。 –

在純CSS中，媒體查詢不能像這樣嵌套。只有CSS預處理器（如LESS和Stylus）允許您這樣做。 CSS預處理器本身將採用示例1中給出的代碼（這是無效的CSS，但在CSS預處理器中有效），並將其轉換爲類似於示例2（有效的CSS）的內容。

如果您使用的是CSS預處理器，那麼如果您有一長串嵌套元素，則示例1可能是最好的方法，但如果您未使用CSS預處理器，則示例2是唯一一個會給出你有任何結果。

來源

2016-04-19 07:39:58

我期望從有你的聲譽的人。如果你想要求OP說明，你應該發佈一條評論。這個問題顯然是有見地的，你應該投票決定關閉它。 – cimmanon

@cimmanon如果你看過我的回答，我根本不要求OP給出澄清。 OP使用CSS和CSS3標記了這個quesiton，沒有其他，並沒有提到有關CSS預處理器的任何內容。我的答案指出，在CSS（和CSS3）中，只有示例2會起作用。沒有澄清要求。這裏根本沒有「自以爲是的」，因爲示例1在純粹的CSS環境下不起作用。 –

@cimmanon此外，在我發佈我的答案（[這裏是原創]（http://stackoverflow.com/revisions/36711551/1））之後，OP編輯了他們的問題，說他們正在使用SASS。與其讓所有人對整體感到不高興，「我預計會好得多...」，「OP已經編輯了他們的問題，所以這個答案不再是完全準確的」，會是一個非常友好的迴應。 –

使用SASS我更喜歡第一種方法tbh。另外，如果我要寫代碼，我肯定會有一個文件用於_buttons.scss，另一個用於_about-section.scss。這意味着無論如何都無法共享媒體查詢。不過我建議你定義媒體查詢，你可以重複使用的變量：

$bp-medium: (min-width: 600px);

再後來：

@media #{$bp-medium} { 
    // Code here... 
}

一個原因我寧願選擇方法裏面的媒體查詢是因爲當你嵌套在SASS中，您仍然希望將媒體查詢保留在與原始樣式相同的區域中。例如：

.button { 
    background: blue; 
    padding: 1rem 2rem; 

    // Large Buttons 
    &--large { 
     padding: 1.5rem 3rem; 

     @media #{$bp-medium} { 
      padding: 2rem 4rem; 
     } 
    } 
}

爲了不讓媒體查詢不在類中，「離開範圍」會很煩人。

來源

2016-04-19 07:46:46 powerbuoy

必須愛這些甚至沒有留下評論的選民。太令人沮喪了。 – powerbuoy

@media在課前或課後查詢？

回答

相關問題