链css媒体和容器查询

ryoqjall  于 2022-11-19  发布在  其他
关注(0)|答案(2)|浏览(97)

我怎样才能合并这样的查询,这样我就不会重复css代码了?每个查询都是独立工作的,但不是一起工作的。
如果容器查询不起作用,我希望使用媒体作为后备。我知道媒体适用于整个页面宽度,而容器查询只适用于元素宽度。
第一个

eaf3rand

eaf3rand1#

如果我明白你想要什么你只需要移动你的@media查询你的@container
第一个

wwtsj6pe

wwtsj6pe2#

你不能把@media和@container合并在一起。据我所知,一个合适的CSS的后备方案必须提供单独的样式。

/* Fallback */
@media (max-width: 1250px) {
  .links {
    display: none;
  }
}

/* Container queries */
@container mvp_dialog_data (max-width: 1250px) {
  .links {
    display: none;
  }
}

/* Feature detection */
@supports (container-type: inline-size) {
  .container {
    container: mvp_dialog_data / inline-size;
  }
}

相关问题