styles.css和@media之间的冲突query.css

我有这个示例html/css代码。styles.css和@media之间的冲突query.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）。

我是新来的媒体查询，请帮忙。

来源

2017-04-24 Laurence Albano

你指定的范围内以'min'和'max'，像这样仅'屏幕@media和（最小宽度：769px）和（最大宽度：959px）'。 ..并放弃你在规则中的逗号 – LGSon

范围，您已指定它们相互重叠，我将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>

来源

2017-04-24 04:13:19 Ehsan

这实际上应该很简单，幸运的是，我应该阅读这个权利。如果你想设置一个范围，其中的最小设备宽度为769px和你最大的是959px，你应该写你的代码像这样：

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

希望这个作品！

来源

2017-04-24 03:47:58 TCharb

styles.css和@media之间的冲突query.css

回答

相关问题