Question

出于某种原因，我无法让我的媒体查询工作....有人可以解释发生了什么吗？

屏幕尺寸为241（铬，即ff）

CSS

@media screen and (max-width: 500px)
{
    body
      {
        width: 100%;
        background-color: black;
      }

  #header
    {
      display: none;
    }
}

HTML

<!DOCTYPE html> 
<html>
<head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

    <title>Test</title>

    <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
    <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet'  type='text/css'>
 </head>
 <body> 
     <div id="header">
         <p>This is my header</p>
     </div>

     <p>This is a paragraph</p>
 </body>
 </html>

编辑拼写错误

Answer 1

你自己有什么作品：

<!DOCTYPE html> 
<html>
<head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    @media screen and (max-width: 500px)
        {
        body
          {
            width: 100%;
            background-color: black;
          }
          #head
            {
              display: none;
            }
        }
    </style>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
    <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet'  type='text/css'>
 </head>
 <body> 
     <div id="head">
         <p>This is my header</p>
     </div>

     <p>This is a paragraph</p>
 </body>
 </html>

检查您是否有任何可能覆盖此查询的其他媒体查询。否则，它可能是您的样式表的链接，这是问题，

Answer 2

仔细检查您的媒体查询是样式表中的最后一项，并且不会被其他应用的样式覆盖，例如

    <style>
    @media screen and (max-width: 500px)
    {
    body
      {
        width: 100%;
        background-color: black;
      }
      #header
        {
          display: none;
        }
    }
    body {background-color: white;}
    </style>

我给出的示例永远不会更改body元素的背景颜色，因为媒体查询下面的样式会覆盖它

媒体查询不起作用（提供的代码）

2 个答案: