地图设计中的响应标记

Question

我正在开发一种将图像作为地图的设计，其上有一些绝对定位的标记。问题是我希望在移动视图中方面比例相同，因此标记将位于其中并用图标或其他内容替换它。

请检查此图片：

如您所见，在下图中，标记仍在同一位置。这就是它在移动设备上的外观。当然我会用标记图标替换它，因为信息不可读。

HTML：

<div class="map">
    <div class="marker">
        <span class="reviews">
             <span class="value">98</span>
             <span>Reviews</span>
        </span>
        <div class="meta">
             <h3>Blue Water</h3>
             <h4>Nice to swim</h4>
        <div class="rating"><span>*</span><span>*</span><span>*</span></div>
    </div>
    </div>           
</div>

CSS：

.map {
        background: url("../images/thumb.jpg");
        background-size: cover;
        height: 650px;
        border-radius: 5px;
        margin-top: 20px;
        position: relative;
}

标记代码：

.marker {
        position: absolute;
        height: 80px;
        left: 100px;
        top: 250px;
}

我们如何实现这一目标？

谢谢，

Answer 1

您可以使用CSS3媒体查询为特定设备分辨率或宽度和高度编写新的CSS规则。

例如，您可以为较小的设备添加以下规则：

@media only screen and (max-device-width: 480px) {
    .marker {
        position: absolute;
        left: 100px;
        top: 250px;
        background-image: url('icon.png');
    }
}

以下链接可能很有用："CSS3 @media Query"