媒体查询：根据屏幕尺寸限制一些CSS样式

当我在layout.css中编写一些样式时，它适用于每个屏幕尺寸和/* #Media Queries 部分，您有以下部分：

/* 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代码？

假设你有一个像这样的div<div claas="example"> </div>

现在写一个CSS.example它将应用于那些大于您在媒体查询中提到的范围的屏幕

.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 至 1400 像素的屏幕尺寸

EDIT::

“/* 大于标准 960（设备和浏览器）*/”

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