媒体查询：根据屏幕大小限制一些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...*/
  }
}