@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; 
     } 
    } 
}

在大屏幕上，瀏覽器採用最大寬度規則，忽略默認值。

來源

2016-01-07 user1423168

在頁面後，你的媒體查詢？ – WisdmLabs

你是什麼意思_...應用舊屏幕的一個。 – LGSon

尋求代碼幫助的問題必須包含在問題本身**中重現**所需的最短代碼。請參閱[**如何創建最小，完整和可驗證的示例**]（http://stackoverflow.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>

來源

2016-01-07 13:31:46 LGSon

@media min-witdth被瀏覽器忽略

回答

相關問題