媒体查询未触发
Media query not triggering
如果屏幕超过 640 像素,我正在尝试使用媒体查询更改背景图像并隐藏分区标记中的内容。这似乎不起作用。我是新手,觉得我错过了一些重要的东西。
<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>
首先,您在媒体查询周围缺少 <style>
标记。另外,我建议不要使用内联样式(即 style=""
中的 HTML 属性标签)。将所有 CSS 放在一个地方,最好是一个单独的 CSS 文件,您可以 link 到您的 head 标签中。
此外,请确保您的媒体查询在其他 CSS 选择器之后声明。最后来的先到先得!
CSS 不工作,因为它不包含 with-in 样式标签。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
@media (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;
}
}
</style>
</head>
<body>
<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>
如果屏幕超过 640 像素,我正在尝试使用媒体查询更改背景图像并隐藏分区标记中的内容。这似乎不起作用。我是新手,觉得我错过了一些重要的东西。
<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>
首先,您在媒体查询周围缺少 <style>
标记。另外,我建议不要使用内联样式(即 style=""
中的 HTML 属性标签)。将所有 CSS 放在一个地方,最好是一个单独的 CSS 文件,您可以 link 到您的 head 标签中。
此外,请确保您的媒体查询在其他 CSS 选择器之后声明。最后来的先到先得!
CSS 不工作,因为它不包含 with-in 样式标签。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
@media (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;
}
}
</style>
</head>
<body>
<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>