不同屏幕尺寸是否可以为一个类中的使用不同的CSS?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (83)

目前,我正在使用@media为不同屏幕大小定义不同的CSS

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

我在进行更改时确保更新两个分辨率的CSS时遇到问题,因为他们的位置远离对方。

有没有办法将屏幕大小内化到类内?

IE:

body{
    @media (max-width: 1800){    
        font-size: 14px;    
    }
    @media (min-width: 1800){    
        font-size: 16px;    
    }
}
提问于
用户回答回答于

不,你不能在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 */
  h1 {
    font-size: 36px;
  }
}

所属标签

可能回答问题的人

  • 学生

    3 粉丝476 提问7 回答
  • uncle_light

    5 粉丝518 提问6 回答
  • 最爱开车啦

    8 粉丝503 提问5 回答
  • 骑牛看晨曦

    4 粉丝522 提问5 回答

扫码关注云+社区

领取腾讯云代金券