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屏幕和（max-width：640px）这个css将被启用，为了恢复工作，你需要定义你工作的宽度。在设计时，还建议转换任何缓存方法。

因此，为了让您能够正常工作，您将需要三个@media屏幕属性。

Examples

为什么我的@media屏幕没有保存

1 个答案: