Question

我正在努力使我的网站响应，我虽然我的问题是媒体屏幕没有保存但我发现了。由于某种原因，我不能使用多个媒体屏幕。我之前发布了一个similer问题，但现在我知道问题是什么，但我不知道解决方案。上一篇文章：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) {
    ...

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

1 个答案: