为什么此媒体查询不起作用？如果屏幕的浏览器宽度大于1300像素，则尝试截断图像地图的顶部150像素。图像映射是自适应的，并扩展了浏览器的宽度（该部分工作正常）。
<style>
body {
font-family: Helvetica, Arial, sans-serif;
background-color:#cfa88a;
margin-top: 0px;
}
img[usemap] {
border: none;
height: auto;
width: 100%;
}
/* on big wide screens over 1300px */
@media all and (min-width: 1300px) {
#picmap:{margin-top:-150px;}
}
</style>
</head>
<body>
<img src="lauout.jpg" id="picmap" alt="" width="1105" height="752" usemap="#Map" />
最佳答案
您的“ #picmap”样式中有一个冒号。看到：
#picmap:{margin-top:-150px;}
应该：
#picmap {margin-top:-150px;}
关于html5 - 带有图像映射的媒体查询，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16360502/