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

【问题标题】：Why doesn't my @media screen save为什么我的@media 屏幕没有保存
【发布时间】：2015-06-13 22:47:25
【问题描述】：

在过去的一个小时里，我一直被这个问题困扰，这真的让我很烦。每次我为它编写代码时，我都会让我的网站响应不同的屏幕尺寸，我测试它并且它可以工作。然后，如果我关闭浏览器并重新打开或重新打开代码编辑器（括号），页面加载就像什么都没发生一样。所以我又重新写了一切。这个问题不断出现，我不知道为什么它不会保存。我可以放置我的代码，因为它有超过 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%;
    }

}

【问题讨论】：

这太奇怪了，听起来可能是个愚蠢的问题，但媒体查询位于 css 其余部分的下方，因为您的查询对我来说很好
是的，它太烦人了，我已经重写了，然后当我写完它会再次发生
您是使用方括号实时预览还是从文件夹中打开 .html 文件？
我做了，我只是检查了正常文件，它仍然不起作用。
你能告诉我至少一个你的媒体查询吗？

标签： html css media-queries adobe-brackets

【解决方案1】：

发生这种情况的原因有很多，但我认为这是显而易见的原因。如果您达到@media 屏幕的宽度和（最大宽度：640 像素）这个 css 将被启用，为了回去工作，你需要定义你工作的宽度。在进行设计时，还建议关闭任何缓存方法。

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

Examples

【讨论】：