Question

大家好我制作了一个带有几个div和背景图片的简单网页。基本上，如果设备的宽度较小，我希望背景图像消失。

但是当我将浏览器的宽度最小化到小于500px时，媒体查询仅适用于firefox而不适用于chrome。

另外，此处http://pastebin.com/TZ1UwVmK是代码的链接。您可以将背景图片替换为https://s3.amazonaws.com/codecademy-content/projects/broadway/bg.png。

enter code here

    <code><pre>
    <!DOCTYPE html>
    <html>

        <head>
            <link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css' />
            <link href='testnew1.css' rel='stylesheet' type='text/css' />
            <meta name="viewport" content="width=device-width, initial-scale=1" />  <!-- used to give phones a background in place of image that doesn't show up for unknown reason -->
    <style>
    .container-in-headerdiv { max-width: 940px;
.container-in-headerdiv { max-width: 940px;
        margin: 0 auto;
        padding: 0 10px;}


.header {background-color: #333333;}
.nav{list-style-type:none;
        margin:0;
        padding: 20px 0;}

.jumbotron { background: url('images/projectbroadway-pic.png') no-repeat center center;
        background-color: #333333;  /* gives lavender color if image doesn't load */
        background-size: cover;
        height:800px;} /* not centered, or positioned except its properties as a div under normal flow */
@media (max-width: 500px) {  /* relies on viewport to give width, gives lavender color if image doesnt load */
        .jumbotron{
        background-image:none;
          background: #E6E6FA;
          background-size: cover;
          height:800px;} 
          }
}
.container-in-jumbotron{max-width: 940px;
        margin: 0 auto;
        padding: 0 10px;}
.main { position: relative; /* this class not working at all atm */
        top: 180px;
        text-align: center;}
.btn-main{ background-color: #333333;
color:#ffffff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-transform: uppercase;
}

    </style>


        </head>

        <body>

            <div class="header">
                <div class="container-in-headerdiv">

                    <ul class="nav">
                        <li>About</li>
                        <li>Work</li>
                        <li>Team</li>
                        <li>Contact</li>
                    </ul>

                </div>
            </div>

        <div class="jumbotron">
          <div class="container-in-jumbotron">  
            <div class="main">
              <h1>We are Broadway</h1>
              <a class="btn-main" href="#">Get started</a>
            </div>
          </div>
        </div>

        </body>
    </html>
    </pre></code>

Answer 1

在更新jumbotron的背景而不是background-color时使用背景：

.jumbotron{
            background: #E6E6FA;
            background-size: cover;
            height:800px;
        }

Answer 2

这是因为您在媒体查询中使用了'background-color'而不是'background'

尝试

<code><pre>
<!DOCTYPE html>
<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css' />
    <link href='testnew1.css' rel='stylesheet' type='text/css' />
    <meta name="viewport" content="width=device-width, initial-scale=1" />      <!-- used to give phones a background in place of image that doesn't show up for unknown reason -->
<style>
.container-in-headerdiv { max-width: 940px;
    margin: 0 auto;
    padding: 0 10px;}


.header {
    background-color: #333333;
}

.nav{ 
    list-style-type:none;
    margin:0;
    padding: 20px 0;}

.jumbotron { background: url('https://s3.amazonaws.com/codecademy-        content/projects/broadway/bg.png') no-repeat center center;
    background-color: #333333;  /* gives lavender color if image doesn't load */
    background-size: cover;
    height:800px;} /* not centered, or positioned except its properties as a     div under normal flow */
@media (max-width: 500px) {  /* relies on viewport to give width, gives lavender color if image doesnt load */
    .jumbotron {
        background: none;
        background-color: #E6E6FA;
        background-size: cover;
        height:800px;
    }
}
.container-in-jumbotron { 
    max-width: 940px;
    margin: 0 auto;
    padding: 0 10px;
}

.main {
    position: relative; /* this class not working at all atm */
    top: 180px;
    text-align: center;
}

.btn-main {
    background-color: #333333;
    color:#ffffff;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 1.3px;
    padding: 16px 40px;
    text-decoration: none;
    text-transform: uppercase;
}     
</style>


</head>

<body>

    <div class="header">
        <div class="container-in-headerdiv">

            <ul class="nav">
                <li>About</li>
                <li>Work</li>
                <li>Team</li>
                <li>Contact</li>
            </ul>

        </div>
    </div>

<div class="jumbotron">
  <div class="container-in-jumbotron">  
    <div class="main">
      <h1>We are Broadway</h1>
      <a class="btn-main" href="#">Get started</a>
    </div>
  </div>
</div>

</body>
</html>
</pre></code>

为我的Chrome工作

Answer 3

更新这里是pastebin pastebin.com/YgJv5MMA这是截图i.imgur.com/buTLjzp.png

它现在适用于野生动物园，歌剧，智能手机，边缘和资源管理器。我有谷歌Chrome 47.0.2526.80（官方版）m（32位）。

我也找到了答案，说明在Chrome浏览器和媒体查询中调整窗口大小的问题Google Chrome, float, and media queries和Weird float rendering in Chrome when using media queries

哦，我正在继续。

EDIT 发现问题。是通过Dropbox链接html和css文件。我把这两个文件放在我的本地桌面上，现在当页面最小化到宽度小于500px时，媒体查询就可以了。所以我想我不会使用Dropbox。感谢您为我调查此内容。

这是html和css pastebin.com/YgJv5MMA

媒体查询不能在简单的Chrome网站上工作，但在Firefox中也可以

3 个答案: