@media min-witdth被浏览器忽略

问题描述：

我有一对768宽度的屏幕规则。问题在于，在比这更大的屏幕上，浏览器采用了错误的规则，并将其应用于较旧的屏幕。@media min-witdth被浏览器忽略

@keyframes p1 
{ 
    from{ 
     bottom:0;display:none;opacity:0; 
    } 
    50% { 
     bottom:15;opacity:0.5; 
    } 
    to{ 
     bottom:25%;display:block;opacity:1; 
    } 
} 


@media screen and (max-width: 800px) { 
    @keyframes p1 
    { 
     from{ 
      bottom:0;display:none;opacity:0; 
     } 
     50% { 
      bottom:10;opacity:0.5; 
     } 
     to{ 
      bottom:15%;display:block;opacity:1; 
     } 
    } 
}

在大屏幕上，浏览器采用最大宽度规则，忽略默认值。

在页面后，你的媒体查询？ – WisdmLabs

你是什么意思_...应用旧屏幕的一个。 – LGSon

寻求代码帮助的问题必须包含在问题本身**中重现**所需的最短代码。请参阅[**如何创建最小，完整和可验证的示例**]（http://*.com/help/mcve） –

答

检查this question，这可能是重复的，它有很多很好的答案。

~~如预期的那样，大屏幕以蓝色显示div（默认），一个介质将显示为绿色，在较小的位置显示为红色。~~

注意媒体查询规则的顺序。

注意事项：另外请注意，尽管身材小巧，一些“小屏幕”可以有许多像素。请在设备上查看this answer了解更多信息。

div { 
 
    background-color: blue; 
 
    height: 30px; 
 
} 
 

 
@media screen and (max-width: 1200px) { 
 
    div { 
 
    background-color: green; 
 
    } 
 
} 
 

 
@media screen and (max-width: 800px) { 
 
    div { 
 
    background-color: red; 
 
    } 
 
}

<div></div>

@media min-witdth被浏览器忽略

相关推荐