Question

当前，我正在使用@media为不同的屏幕尺寸定义不同的CSS

@media (max-width: 1800){
    body{
        font-size: 14px;
    }
}
@media (min-width: 1800){
    body{
        font-size: 16px;
    }
}

更改时，我无法确保同时更新两个分辨率的CSS，因为它们彼此之间的距离很远。

有没有办法将屏幕尺寸内部化到班级内部？

即：

body{
    @media (max-width: 1800){    
        font-size: 14px;    
    }
    @media (min-width: 1800){    
        font-size: 16px;    
    }
}

Answer 1

不，您不能在CSS规则的声明块内包含媒体查询。

但是，听起来您的问题可能主要与组织比示例中包含的CSS多得多的CSS有关，以简化对特定选择器进行更改的过程。如果是这种情况，那么它可以帮助您对同一断点使用多个媒体查询。这可以帮助您组织CSS以简化维护（将相关的CSS规则放得更近一些），但是由于重复使用@media规则，确实会给代码增加膨胀（无论膨胀是简化维护过程的合理折衷方案）由您决定）。

例如：

/* body styles */

body {
  font-size: 14px;
}

@media all and (min-width: 1800px) {
  /* body styles for 1800px and above */
  body {
    font-size: 16px;
  }
}


/* h1 styles */

h1 {
  font-size: 24px;
}

@media all and (min-width: 1800px) {
  /* h1 styles for the same media breakpoint as above */
  h1 {
    font-size: 36px;
  }
}

一个类中的不同屏幕尺寸是否可能具有不同的CSS

1 个答案: