为什么我的@media屏幕不保存 [英] Why doesn't my @media screen save

问题描述

我一直坚持这个问题或过去一小时，它真的很烦人。每次我为它编写代码时，我都会让网站对不同的屏幕尺寸作出响应，我测试它并且它可以正常工作。然后，如果我关闭浏览器并重新打开或重新打开代码编辑器（括号），则页面加载就像没有任何事情发生。所以我又重新写了一切。这个问题不断重演，我不知道为什么它不会保存。我可以放置我的代码，因为它的超过2000行，我刚刚移动到该网站的响应方。

但我已经应用到每个html文件。 / p>

 < meta name =viewportcontent =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;
底部：5％;还剩
：40％;
右：40％;
}

.logo img {
position：fixed;
margin-left：auto;
margin-right：auto;
display：block;
底部：2％;还剩
：40％;
右：40％;

}

.home img {
position：fixed;
margin-left：auto;
margin-right：auto;
display：block;
底部：5％;还剩
：40％;
右：40％;
width：120px;
}


.socialmedia-twitter img {
position：fixed;
margin-left：auto;
margin-right：auto;
display：block;
底部：5％;剩余
：20％;
右：40％;
}

.socialmedia-facebook img {
position：fixed;
margin-left：auto;
margin-right：auto;
display：block;
底部：5％;
右：20％;还剩
：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;
底部：5％;还剩
：40％;
右：40％;
}

.logo img {
position：fixed;
margin-left：auto;
margin-right：auto;
display：block;
底部：2％;还剩
：40％;
右：40％;
}

.home img {
position：fixed;
margin-left：auto;
margin-right：auto;
display：block;
底部：5％;还剩
：40％;
右：40％;
width：120px;
}


.socialmedia-twitter img {
position：fixed;
margin-left：auto;
margin-right：auto;
display：block;
底部：5％;
右：50％;

}

.socialmedia-facebook img {
position：fixed;
margin-left：auto;
margin-right：auto;
display：block;
底部：5％;
右：20％;
剩下：50％;
}

}


解决方案

有很多原因可能会发生，但我认为这是明显的原因。
如果你达到@media屏幕的宽度，并且（max-width：640px）
这个css将被启用，为了回到你的工作方式，你需要定义你工作的宽度。
在处理设计时，也建议关闭任何缓存方法。

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

例子

I have been stuck with this problem or the past hour and its really annoying me. I am making my website responsive to different screen sizes every time I write the code for it, I test it and it works. Then if I close the browser and reopen or reopen the code editor (brackets) the page loads like nothing happened. So I have re write everything again. This problem keeps recurring and I don't know why it wont just save. I can place my code since its over 2000 lines and I have just moved on to the responsive side of the site.

but I have applied this to every html file.

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

and I have used this as my starting statement for the @media in the css

@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%;
    }

}

解决方案

There are lots of reasons why this could have happen, but i think it is the obvious one. if you reach a sertan width @media screen and (max-width: 640px) this css wil be enabled, in order to work his way back you need to define the width your working in. While working on the design, it is also recommended to turn of any cache methods.

So for this to work proberly you will prob need three @media screen properties.

Examples

这篇关于为什么我的@media屏幕不保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！