Question

为什么这个媒体查询不起作用？如果屏幕浏览器宽度大于1300像素，我试图切断图像地图的前150px。图像映射是响应式的，并扩展了浏览器的宽度（该部分工作正常）。

<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" />

Answer 1

你的'#picmap'样式中有一个冒号。参见：

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

应该是：

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

媒体查询与图像映射

1 个答案: