html - 媒体查询：根据屏幕大小限制一些 CSS 样式

Question

当我在 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 代码？

Answer 1

假设你有一个像<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 像素的屏幕尺寸
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...*/
  }
}