我不知道为什么，但我不能使用多个@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) { 
    ...