1

我的问题是关于背景图像。我正在为 iPhone 屏幕设计一个主页，我想为移动版本使用稍微不同的图像。我的媒体查询不在单独的 css 文件中，只是嵌入在 index.html 中。问题...主要的 CSS 图像覆盖了我的查询图像。我检查了额外的括号等。我认为媒体查询优先于主 css？如果我将媒体查询放在 css 链接文件中，我会得到我想要的结果吗？

这是我的主要css代码：

#container
{
  background-image:url(images/1000_framec.jpg);
  background-repeat:no-repeat;
  width:999px;
  height:980px;
  margin:0 auto;
}

以下是我的媒体查询代码：

@media only screen and max-width 320px {
  #container
  {
    width:98%;
    background:url(images/1000_frameo.jpg) no repeat left;
    margin-top:80px;
    -webkit-background-size:contain;
    -moz-background-size:contain;
    -o-background-size:contain;
    background-size:contain;
  }
}
4

1 回答 1

3

媒体查询和@media规则是CSS。但是这些对 cascade 是透明的，因此无论您是否将样式规则放入规则中@media，或者是否将其放入已链接的样式表中media="..."，都不会影响该规则在 cascade 中的优先级。

其余的级联规则照常适用：最具体的选择器胜出，一系列同样具体的选择器中的最后一个胜出，内联样式优先于内部样式表，而内部样式表又优先于外部样式表，以及很快。

于 2013-01-19T13:19:31.273 回答