媒体查询未触发

时间:2015-06-09 13:10:07

标签: html css media-queries

如果屏幕超出640px,我尝试使用媒体查询来更改背景图像并隐藏分区标记中的内容。这似乎不起作用。我对此感到陌生,觉得自己错过了一些重要的东西。

    <html>
   <HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
</style>
</HEAD>
<body>
@media screen and (min-width:641px) {
body {background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
div.desktop {visibility:hidden;}
}
<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg"  width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg"  width=100% height=auto>
</div> 
</body>
</html>

2 个答案:

答案 0 :(得分:0)

首先,您在媒体查询周围缺少/home/myusername标记。另外,我建议不要使用内联样式(即HTML中的git clone myusername@myserver.com:~/git/myapp.git 属性标记)。将所有CSS保存在一个位置,最好是一个单独的CSS文件,您可以在头标记中链接到该文件。

此外,请确保您的媒体查询在其他CSS之后为这些选择器声明。无论最后的事情都会先例!

答案 1 :(得分:0)

CSS无法正常工作,因为它未包含内置样式标记。

minLength