Question

我最近发现媒体查询作为一种工具，因此没有太多经验（秒数，真的）。我有一个#logo使用宽度为7％的左边距，但是将其更改为25px的规则由于某种原因不起作用。有趣的是，其他特定媒体查询工作正常，只有徽标没有。可能是什么问题？

@media (max-width: 1320px) and (min-width: 105.1px){

#wrapper {
width: 100%;
}

#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 25px;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}

}


#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 7%;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}

Answer 1

您的媒体查询需要遵循#logo的常规规则集，以便您的查询覆盖默认规则。一旦你这样做，你可以删除你的重要标志。

Answer 2

您需要稍微清理一下媒体查询，因为存在一些冗余。此外，您需要决定如何构建CSS，例如在移动优先方法或大屏幕中，然后针对较小的屏幕进行定位。在您的代码中，没有充分的理由使用!important作为结构，初始CSS将纠正问题。

同样在您的示例中，min-width:105有点无用，因为移动屏幕的min-width大约为320px（我通常会说）。如果您希望应用所有样式直到屏幕宽度超过1320px，您可以设置如何设置。

这是一个jsfiddle作为例子：http://jsfiddle.net/disinfor/t9rq36mn/ 请注意，我将小提琴中的（min-width）更改为600px，这样您才能真正看到它正常工作。您也可以将小提琴中的min-width更改为max-width，以使其反向运作。

移动第一种方法：

#wrapper {
width: 100%;
}

#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 25px;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}

@media screen and (min-width:1320px) {
  #logo {
   margin-left: 7%;
  }
}

大屏幕第一种方法：

#wrapper {
width: 100%;
}

#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 7%;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}

@media screen and (max-width:1319px) {
  #logo {
   margin-left: 25px;
  }
}

基本上，您只需要在达到媒体查询参数（min-width，max-width，min-device-width，max-device-width后更改实际更改的元素的属性，等）

希望这有助于澄清事情。

为什么没有应用其中一个媒体查询规则？

2 个答案: