我不知道爲什麼，但我不能使用多個@media屏幕

Question

我想讓我的網站響應，我雖然我的問題是媒體屏幕不保存，但我發現了。出於某種原因，我不能使用多個媒體屏幕。我之前發佈了一個模擬器問題，但現在我知道問題是什麼，但我不知道解決方案。上一篇：Why doesn't my @media screen save

CSS

@media screen and (max-width: 480px) { 

    header img{ 
margin-left: auto; 
margin-right: auto; 
display: block; 
} 

footer img{ 
position:fixed; 
margin-left: auto; 
margin-right: auto; 
display: block; 
bottom: 5%; 
left: 40%; 
right: 40%; 
} 
.logo img{ 
position:fixed; 
margin-left: auto; 
margin-right: auto; 
display: block; 
bottom: 2%; 
left: 38%; 
right: 40%; 
} 
.home img{ 
position:fixed; 
margin-left: auto; 
margin-right: auto; 
display: block; 
bottom: 5%; 
left: 35%; 
right: 40%; 
width: 120px; 
} 


.socialmedia-twitter img { 
position:fixed; 
margin-left: auto; 
margin-right: auto; 
display: blocks; 
bottom: 5%; 
left: 5%; 
right: 95%; 
} 

.socialmedia-facebook img { 
position:fixed; 
margin-left: auto; 
margin-right: auto; 
display: block; 
bottom: 5%; 
right: 13%; 
left: 87%; 
} 



} 


@media screen and (max-width: 640px) { 

header img{ 
margin-left: auto; 
margin-right: auto; 
display: block; 
} 

footer img{ 
position:fixed; 
margin-left: auto; 
margin-right: auto; 
display: block; 
bottom: 5%; 
left: 40%; 
right: 40%; 
} 
.logo img{ 
position:fixed; 
margin-left: auto; 
margin-right: auto; 
display: block; 
bottom: 2%; 
left: 40%; 
right: 40%; 
} 
.home img{ 
    position:fixed; 
margin-left: auto; 
margin-right: auto; 
display: block; 
bottom: 5%; 
left: 40%; 
right: 40%; 
width: 120px; 
} 


.socialmedia-twitter img { 
position:fixed; 
margin-left: auto; 
margin-right: auto; 
display: block; 
bottom: 5%; 
right: 50%; 

} 

.socialmedia-facebook img { 
position:fixed; 
margin-left: auto; 
margin-right: auto; 
display: block; 
bottom: 5%; 
right: 20%; 
left: 50%; 
} 
} 

Answer 1

當屏幕寬度爲480個像素或更低，這兩個規則集適用。 max-width 640px規則集中的規則有效地覆蓋了480px規則集中的所有內容。

您必須指定640px規則集僅適用於480px和640px寬度之間。

@media screen and (min-width: 480px) and (max-width: 640px) { 
    ...