Question

getCombined() {
  return of(this.parent).pipe(
    switchMap(families => {
      return families.map(family => {
        return forkJoin(
          family.pets.map(pet => {
            return this.getMood(pet.id).pipe(
              map(data => {
                pet.mood = data.mood;
                return family;
              })
            )
          })
        )
      })
    }), switchMap((d) => d)
  );
}

使用上面的代码表示屏幕宽度例如-1200像素是应用哪个属性？

Answer 1

在您的示例中，它们都相等，specificity都被应用。在这种情况下最后的声明适用。

Specificity是应用于给定CSS声明的权重，它由匹配选择器中每种选择器类型的数量决定。当多个声明具有相同的特异性时，将在CSS中找到的最后一个声明应用于该元素。

调整浏览器的大小以查看蓝色（<= 2000px）和红色（<= 600px）之间的交换

@media(max-width:2000px) {
    html {
        background-color:blue;
    }
}
@media(max-width:600px) {
    html {
        background-color:red;
    }
}

但是，如果更改顺序，则无论您将其视口变窄，它都不会变成红色，因为即使1px宽仍小于2000px最大宽度：

@media(max-width:600px) {
    html {
        background-color:red;
    }
}
@media(max-width:2000px) {
    html {
        background-color:blue;
    }
}

您可能会发现使用min-width更合适。或min-width 和 max-width的组合：

@media all and (max-width: 699px) and (min-width: 520px)

或者您可以设置默认样式，并且仅在视口至少为x宽时覆盖它：

html {
    background-color:red;
}

@media(min-width: 600px) {
    html {
        background-color:blue;
    }
}

Answer 2

1200像素的屏幕宽度将使50％规则生效。低于1440，很明显这是通过简单的测试进行的，然后将屏幕调整为所需的宽度，并在超过1440px阈值时看到蓝条跳动。

 @media(max-width:1920px) {

    .callbacks_tabs {
        left: 45%;
    }

}
@media(max-width:1440px) {

    .callbacks_tabs {
        left: 50%;
    }

}

.callbacks_tabs {
  position:relative;
  background:blue;
}

https://jsfiddle.net/bqah8zr0/

哪个CSS属性被应用？

2 个答案: