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

这样的div

现在为.example写一个css，该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. ＆gt; 1400px屏幕尺寸
2. 1300至1400px屏幕尺寸
3. ＆lt; 1300px屏幕尺寸

修改::

  

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

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