Html 响应性网站和媒体查询

我使用的媒体查询如下

@media (min-width:100px) and (max-width:639px)  
{
}
@media (min-width:640px) and (max-width:960px)  
{
    .box  {background-color:red;}
}
@media (width:768px)
{
    .box  {background-color:green; }
}
@media (min-width:961px)
{
}

我想特别针对屏幕768像素的某个div元素，使其完全符合我的要求。例如，一般来说，我想覆盖

@媒体（最小宽度：640px）和（最大宽度：960px）

中定义的css，该css是针对屏幕768

@媒体（最小宽度：768px）

---

目前，它仍然显示我框为红色，而它应该是红色的，我不知道如何css是符合我定义后，第二次媒体查询，以便它将权利它

如何使用特定设备的媒体查询来定位特定元素

例如：

更新：

我不确定它到底出了什么问题，我复制粘贴的

@media（宽度：768px）{

部分来自fiddle&它在我的实际页面中工作。

---

可能是一些看不见的打字错误。

这只是媒体查询的一个示例您希望在媒体查询之前使用常规css

#gallery-1 img {
    width:375px;
}
@media screen and (min-width: 1366px) {
    #gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
    #gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
    #gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
    #gallery-1 img {width:540px;}
}

当您使用媒体查询时，您需要指定屏幕大小，以便在

@media

之后使用

screen

。我希望这是您一直在寻找的，并将对您有所帮助

下面是我制作的一个小脚本示例

<style>
#box {
    width: 500px;
    height: 200px;
    background: yellow;
    border: 1px solid #000;
}
@media screen and (max-width:1000px) {
    #box { background: red; }
}
@media screen and (min-width:1000px) and (max-width:1200px) {
    #box { background: green; }
}
@media screen and (min-width:1200px) and (max-width:1400px) {
    #box { background: blue; }
}
</style>
<div id="box">

</div>

#盒子{
宽度：500px；
高度：200px；
背景：黄色；
边框：1px实心#000；
}
@媒体屏幕和屏幕（最大宽度：1000px）{
#框{背景：红色；}
}
@媒体屏幕和（最小宽度：1000px）和（最大宽度：1200px）{
#框{背景：绿色；}
}
@媒体屏幕和（最小宽度：1200px）和（最大宽度：1400px）{
#框{背景：蓝色；}
}

---

在JSFIDLE上，屏幕大小不是整个屏幕，它是预览所在的小框，因此您需要将大小缩小以查看效果，这里是一个调整屏幕浏览器大小以查看预览。

您是否尝试使用重要关键字？是的，我尝试过！重要关键字&令我惊讶的是，它在FIDLE上有效，但在实际网页中无效。媒体查询的排列顺序与在小提琴上的排列顺序相同。目前，它仍然将方框显示为红色，而它应该显示为红色，这是什么意思？？？媒体屏幕和（最小宽度：1366px）和@Media（最小宽度：1366px）之间的区别是什么`这让我很困惑。在第二个例子中，你没有定义你想要的屏幕宽度，这就是为什么在

@media

标记后，你放了

screen

，这样它就知道要看屏幕的宽度。我将用一个框写一个小脚本，给我一两分钟