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

Question

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

3

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

- Positivity

/************************************************************************************ 小于1280 *************************************************************************************/ @media screen and (max-width: 1280px) { 在此处编写您的CSS，并选择您想要的视口 } - San

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RbG · Accepted Answer

假设你有一个像这样的div：<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...*/
  }
}

在上述代码中，您提到了三种不同的样式：

针对大于1400像素的屏幕尺寸
针对1300至1400像素的屏幕尺寸
针对小于1300像素的屏幕尺寸

编辑：

"/* 大于标准960的屏幕（设备和浏览器） */"

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