Question

所以，例如我有：

#headerMain {
    position: fixed;
    width: 100%;
    background: rgba(255,255,255,.9);
    z-index: 999999999;
    overflow: hidden;
}

我只想在去手机时更改位置属性：

@media only screen and (max-width: 480px) {
  #headerMain {
    position: absolute;
  }
}

或者我是否需要指定所有属性？

@media only screen and (max-width: 480px) {
  #headerMain {
    position: absolute;
    width: 100%;
    background: rgba(255,255,255,.9);
    z-index: 999999999;
    overflow: hidden;
  }
}

提前谢谢!!!

Answer 1

是的，您可以在使用媒体查询时简单地覆盖单个声明。一个简单的例子：

#headerMain {
  background: blue;
  color: white;
}

@media only screen and (max-width: 480px) {
  #headerMain {
    background: red;
  }
}

当视口大于480px时，文本将为白色，背景将为蓝色。当视口小于480px时（您只需更改浏览器窗口的大小即可实现），背景将为红色，但文本将保持白色。

这是因为CSS的级联部分。在小于480px宽的视口中，该元素继承两个#headerMain声明，更具体的媒体查询（@media only screen and (max-width: 480px)）会覆盖背景颜色以使其变为红色。

是否有可能只在@media中定义一个不断变化的属性？

1 个答案: