媒体查询在 chrome 上的简单网站中不起作用，但在 Firefox 中起作用答案

【问题标题】：Media Query wont work in simple website on chrome but does in firefox媒体查询在 chrome 上的简单网站中不起作用，但在 Firefox 中起作用
【发布时间】：2016-03-17 22:11:27
【问题描述】：

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

但是当我将浏览器的宽度最小化到小于 500 像素时，媒体查询仅适用于 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>

【问题讨论】：

标签： html css width device viewport

【解决方案1】：

你在更新jumbotron的背景时使用了背景而不是背景色：

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

【讨论】：

谢谢，我更新了代码，请检查一下。它适用于 explorer firefox 和智能手机，但不适用于 chrome
应该是这样的：'code' .jumbotron { 背景：#E6E6FA;背景尺寸：封面；高度：800px； }

【解决方案2】：

这是因为您在媒体查询中使用了“背景颜色”而不是“背景”

试试

<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 中工作

【讨论】：

我更新了代码，请检查一下，它适用于 Firefox 和资源管理器以及智能手机。只是不在 chrome 上。
嘿，您的代码可以工作，但当我将 css 放到不同的文件时就不行了。你能看看我的截图并告诉我有什么问题吗？ imgur.com/2YhKUy9
对不起，我在这张截图上看不到任何东西：-/
pastebin.com/YgJv5MMA i.imgur.com/buTLjzp.png 图片在新标签中放大，抱歉:(

【解决方案3】：

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

它现在可以在 safari、opera、智能手机、edge 和 explorer 上运行。我有 Google Chrome 47.0.2526.80 (Official Build) m (32-bit)。

我还找到了答案，说在 chrome 浏览器和媒体查询中调整窗口大小存在错误Google Chrome, float, and media queries 和这里Weird float rendering in Chrome when using media queries

哦，好吧，我继续前进。

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

这里是 html 和 css pastebin.com/YgJv5MMA

【讨论】：