My question is about background-images. I was designing a home page for iPhone screen and I wanted to use a slightly different image for the mobile version. My media query was not in a separate css file, just embedded in the index.html. Problem...the main css image was overriding my query image. I checked for extra brackets etc. I thought the media queries had precedence over the main css? Would I have got my desired result if I had put the Media query in a css link file?
我的问题是关于背景图像。我正在为iPhone屏幕设计一个主页,我想为移动版本使用略有不同的图像。我的媒体查询不在单独的css文件中,只是嵌入在index.html中。问题...主要的css图像覆盖了我的查询图像。我检查了额外的括号等。我认为媒体查询优先于主css?如果我将媒体查询放在css链接文件中,我会得到我想要的结果吗?
Here is my main css code:
这是我的主要css代码:
#container
{
background-image:url(images/1000_framec.jpg);
background-repeat:no-repeat;
width:999px;
height:980px;
margin:0 auto;
}
and below is my media-query code:
以下是我的媒体查询代码:
@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;
}
}
1 个解决方案
#1
3
Media queries and @media rules are CSS. But these are transparent to the cascade, so whether you put a style rule in a @media rule or not, or whether you place it in a linked stylesheet that has media="..." or not, doesn't affect the precedence of that rule in the cascade.
媒体查询和@media规则是CSS。但这些对级联是透明的,因此无论您是否在@media规则中放置样式规则,或者是否将其放在具有media =“...”的链接样式表中,都不会影响优先级级联中的那条规则。
The rest of the cascading rules apply as usual: the most specific selector wins, the last of a series of equally specific selectors wins, an inline style has more precedence over an internal stylesheet, which in turn has more precedence over an external stylesheet, and so on.
其他级联规则照常应用:最具体的选择器获胜,一系列同等特定选择器中的最后一个获胜,内联样式优先于内部样式表,而内部样式表又优先于外部样式表,并且等等。
#1
3
Media queries and @media rules are CSS. But these are transparent to the cascade, so whether you put a style rule in a @media rule or not, or whether you place it in a linked stylesheet that has media="..." or not, doesn't affect the precedence of that rule in the cascade.
媒体查询和@media规则是CSS。但这些对级联是透明的,因此无论您是否在@media规则中放置样式规则,或者是否将其放在具有media =“...”的链接样式表中,都不会影响优先级级联中的那条规则。
The rest of the cascading rules apply as usual: the most specific selector wins, the last of a series of equally specific selectors wins, an inline style has more precedence over an internal stylesheet, which in turn has more precedence over an external stylesheet, and so on.
其他级联规则照常应用:最具体的选择器获胜,一系列同等特定选择器中的最后一个获胜,内联样式优先于内部样式表,而内部样式表又优先于外部样式表,并且等等。