媒體查詢：根據屏幕大小限制一些CSS樣式

Question

當我在layout.css中編寫一些樣式時，它適用於每個屏幕大小和/ * #Media查詢部分，你有以下部分：

/* Smaller than standard 960 (devices and browsers) */
/* Tablet Portrait size to standard 960 (devices and browsers) */
/* All Mobile Sizes (devices and browser) */
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

所以這些都不是我想要的。

我應該在哪里寫大屏幕特定的CSS代碼？

Answer 1

假設你有一個像<div claas="example"> </div>

現在為.example寫一個css，它將應用於那些大於你在媒體查詢中提到的范圍的屏幕

.example{
  /*..for larger screen style goes here....*/
 }
@media screen and (max-width: 1400px) { 
  .example {
    /*...now give style for those screen which are less than 1400px...*/
  }
}
@media screen and (max-width: 1300px) {
  .example {
    /*...now give style for those screen which are less than 1300px...*/
  }
}

在上面的代碼中你提到了三種不同的風格

1. > 1400px屏幕尺寸
2. 適用於1300到1400px的屏幕尺寸
3. <1300px屏幕尺寸

編輯：：

“/ *大於標准960（設備和瀏覽器）* /”

.example{
  /*..style for larger than 960px....*/
 }
@media screen and (max-width: 960px) { 
  .example {
    /*..style for lesser than or equal to 960 px...*/
  }
}