Html 我不知道为什么，但我不能使用多个@媒体屏幕

我试图让我的网站响应，我想我的问题是媒体屏幕没有保存，但我发现了。由于某些原因，我不能使用多个媒体屏幕。我以前发布过一个类似的问题，但现在我知道问题是什么，但我不知道解决方法。前任职务：

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

---

当屏幕宽度小于等于480像素时，两个规则集都适用。最大宽度640px规则集中的规则有效地覆盖了480px规则集中的所有内容

您必须指定640px规则集仅在480px和640px宽度之间适用

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

---

这种行为是什么？它是否忽略了640px部分，480px部分或污点？我想我已经修复了它。谢谢你的来信