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

Question

I'm trying to have the mobile-style.css hide the background at 640px. 我试图让mobile-style.css隐藏背景为640px。 This works on Chrome but not in Firefox nor mobile safari? 这适用于Chrome，但不适用于Firefox和移动浏览器吗？ It also works offline for Firefox but not on a server? 它也可以在Firefox下离线运行，但不能在服务器上运行吗？ Very very strange. 非常非常奇怪。

        <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 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 style-mobile.css

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

           display:none;
            }   

        }

Answer 1

I would suggest using background property from CSS instead of using an img as background as it will cause issues on some or the other browsers. 我建议使用CSS的background属性，而不要使用img作为背景，因为这会在某些或其他浏览器上引起问题。 Simply add the path of the image in the CSS file and change the property to none in media query and you are good to go. 只需在CSS文件中添加图像的路径，然后在媒体查询中将该属性更改为none，就可以了。 Also, please make sure that the image path or the image name is not having any blank spaces in it. 另外，请确保图像路径或图像名称中没有空格。 Try to replace spaces with '-' or '_'. 尝试用“-”或“ _”替换空格。

For Example: 例如：

#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