为什么我的@media屏幕无法保存

Question

我一直被这个问题困扰，或者在过去的一个小时里一直困扰着我。 每次我为网站编写代码，对其进行测试并都能正常工作时，我都会使网站响应不同的屏幕尺寸。 然后，如果我关闭浏览器并重新打开或重新打开代码编辑器（括号），则页面加载将像什么都没有发生一样。 所以我重新写了一切。 这个问题不断发生，我不知道为什么它不会保存。 由于代码超过2000行，因此可以放置我的代码，而我只是移至该站点的响应端。

但是我已经将此应用于每个html文件。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

并且我已经将其用作css中@media的开始语句

@media screen and (max-width:)

CSS

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%;
    left: 20%;
    right: 40%;
}

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

@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

发生这种情况的原因有很多，但我认为这是显而易见的原因。 如果达到Sertan宽度@media屏幕并且（最大宽度：640像素）将启用此CSS，则要返回原位，您需要定义工作的宽度。在设计时，还建议打开任何缓存方法。

因此，要使其正常工作，您可能需要三个@media屏幕属性。

例子