带图像映射的媒体查询

为什么这个媒体查询不起作用？如果屏幕的浏览器宽度大于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" />

来源

2013-05-03 wall-nut

请提供相关的HTML，以及可能的小提琴（http://jsFiddle.net） – 2013-05-03 13:59:51

我修改了上面显示相关的HTML。唯一的HTML是它映射的图像，然后是地图的坐标。 – 2013-05-03 14:09:12

在'#picmap'样式中有一个冒号。请参阅：

#picmap:{margin-top:-150px;}

应该是：

#picmap {margin-top:-150px;}

来源

2013-05-03 14:17:18 ezekielDFM

谢谢你的工作。 :) – 2013-05-03 14:37:31

带图像映射的媒体查询

回答

相关问题