Question

我有这个示例html / css代码。

div a {width:20%; display:inline-block; height:100px; color:#000; background:red; padding: 10px; text-align:center;}

<div>
  <a>A</a>
  <a>B</a>
  <a>C</a>
</div>

使用媒体查询调整锚标记的填充时，使用以下媒体时仍然可以：

@media only screen and (max-width:960px)
{
    div a {width: 25%; padding: 15px;}
}

@media only screen and (max-width:768px)
{
    div a {width: 27%; padding: 15px 10px;}
}

但是当我使用具有特定宽度范围的媒体时：

@media only screen, (max-width:769px) and (max-width:959px)
{
    div a {padding: 10px 21px 19px 10px;}
}

为什么在调整填充时，此媒体查询与我的样式css冲突？我的媒体查询声明是否设置了特定的宽度范围是不正确的？如果是这样，调用特定宽度（769px-959px）的正确方法是什么。

我是媒体查询的新手，请帮助。

Answer 1

您指定它们彼此重叠的范围，我将959更改为1000以获得更好的结果。

@media only screen and (max-width:768px)
{
    div a {background-color: blue;}
}
@media only screen and (min-width:769px) and (max-width:959px)
{
    div a {background-color: pink;}
}
 @media only screen and (min-width:959px) and (max-width:1000px)
{
    div a {background-color: red;}
}

 <div><a href="">goooood</a></div>

Answer 2

幸运的是，这应该是非常简单的，如果我正在读这个权利。如果您尝试设置最小设备宽度为769px且最大值为959px的范围，则应编写代码：

@media only screen and (min-width: 769px) and (max-width: 959px) { div a { padding: 10px 21px 19px 10px; } }

希望这有效！

styles.css和@media query.css

2 个答案: