html - 为什么我的@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 屏幕和(最大宽度:640px)此 CSS 将被启用，为了返回他的工作方式，您需要定义您的工作宽度。在进行设计时，还建议关闭任何缓存方法。

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

Examples