当媒体查询覆盖其他媒体查询

我为着陆页中的特定元素创建了一系列查询。当媒体查询覆盖其他媒体查询

所以对我的HTML我有这样的：

<div class="hsContent"> 
    <article> here is my awesome content. boom! </article> 
</div>

，这将是对上述DIV初始风格：

.hsContent { 
    max-width: 600px; 
    position: absolute; 
    left: 25%; 
    right: 25%; 
    top: 10%; 
    z-index: 10; 
}

所以，我写了一系列的媒体查询向下钻取以较小的屏幕尺寸，当时最小的是420px。

@media only screen and (min-width: 320px){ 
    .hsContent { 
     width: 300px; 
     position: absolute; 
     left: 10px; 
     top: 24%; 
     padding: 5px 30px 30px 30px; 
     } 
    }

这个工作正常，当我用开发工具在Chrome中测试。但是，添加其他媒体查询了320像素宽度，然后用编程软件检查后：

@media only screen and (min-width: 320px){ 
    .hsContent{ 
     width:300px; 
     top: 10%; !important; 
     padding-left: 10px; 
     padding-right: 10px; 
    } 
}

...该查询被划掉了，就好像它被覆盖（屏幕下方盖）......在这种情况下它的被先前的420px宽度查询覆盖。（请注意，即使是在企图迫使定位包括重要！）

Here's a screen capture of the media query viewed with dev tools（也显示为960像素宽度被覆盖上一个查询 - 这当然是有道理的，）

@media only screen and (min-width: 320px) 
    .hsContent { 
    width: 300px; 
    top: 10%; 
    padding-left: 10px; 
    padding-right: 10px; 
    } 
}

那么，我做了什么错，我能做些什么来解决这个问题呢？

来源

2015-11-09 snottrocket

首先，使用'！important'它的功能就像这样'top：10％！important;'在中间没有半colen –

也是，你的两个媒体查询都被设置为相同'w宽度“是什么媒体查询是低于另一个将是结果。 –

我觉得这是你要的东西：https://jsfiddle.net/pyexm7us/1/

我重新安排你的媒体查询，添加420px到查询的一个固定的语法错误：

CSS

.hsContent { 
    max-width: 600px; 
    position: absolute; 
    left: 25%; 
    right: 25%; 
    top: 10%; 
    z-index: 10; 
} 

@media only screen and (min-width: 320px){ 
    .hsContent{ 
     width:300px; 
     background-color: red; 
     top: 10%; 
     padding-left: 10px; 
     padding-right: 10px; 
    } 
} 
@media only screen and (min-width: 420px){ 
    .hsContent { 
     background-color: blue; 
     width: 300px; 
     position: absolute; 
     left: 10px; 
     top: 24%; 
     padding: 5px 30px 30px 30px; 
     } 
    }

来源

2015-11-09 22:14:27

当媒体查询覆盖其他媒体查询

回答

相关问题