为什么此媒体查询没有显示任何内容？

Question

我试图让mobile-style.css隐藏背景为640px。 这适用于Chrome，但不适用于Firefox和移动浏览器吗？ 它也可以在Firefox下离线运行，但不能在服务器上运行吗？ 非常非常奇怪。

        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/style-mobile.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/muscle-map.css" rel="stylesheet" type="text/css" media="all" />
      </head>

      <body>

        <div id="muscle-map">
          <img id="background" src="Crops/00. Blank Figures.jpg" />
          <img id="biceps-a" src="Crops/05.A Biceps.png" />
          <img id="biceps-b" src="Crops/05.B Biceps.png" />
          <img id="obliques" src="Crops/04. Obliques.png" />

        </div>
      </body>

style.css

  #muscle-map {
         position: relative;
       }

 #background {
   width: 100%;
  }


  #muscle-map > img:not(#background) {
    display: block;
    position: absolute;
    transition: opacity 0.2s;
    opacity: 0;
  }

  #muscle-map > img:not(#background):hover {
    opacity: 1;
  }


  #muscle-map > #biceps-a {
    top: 30%;
    left: 23.9%;
    width: 3.6%;
  }

  #muscle-map > #biceps-b {
    top: 30.0%;
    left: 37.9%;
    width: 3.8%;
  }


   #muscle-map > #obliques {
    top: 31.6%;
    left: 27.3%;
    width:10.8%;
  }


  #muscle-map > #quads-b {
    top: 47%;
    left: 27.22%;
    width: 2.8%;
  }

  #muscle-map > #quads-a {
    top: 46.5%;
    left: 35.3%;
    width:3%;
  }

style-mobile.css

 @media screen and (max-width: 640px) {
        #background {

           display:none;
            }   

        }

Answer 1

我建议使用CSS的background属性，而不要使用img作为背景，因为这会在某些或其他浏览器上引起问题。 只需在CSS文件中添加图像的路径，然后在媒体查询中将该属性更改为none，就可以了。 另外，请确保图像路径或图像名称中没有空格。 尝试用“-”或“ _”替换空格。

例如：

#muscle-map {
    position: relative;
    background: url("Crops/00.-Blank-Figures.jpg") 0 0;
    background-size: 100%;
}
 @media screen and (max-width: 640px) {
    #background {
       background: none;
    }
}

为什么此媒体查询没有显示任何内容？

问题描述

1 个解决方案

解决方案1
0 2015-07-27 11:22:41

为什么此媒体查询没有显示任何内容？

问题描述

1 个解决方案

解决方案1 0 2015-07-27 11:22:41

解决方案1
0 2015-07-27 11:22:41