html - map 设计中的响应式标记

Question

我正在设计一个将图像作为 map 的设计，上面有一些绝对定位的标记。问题是我希望移动 View 上的宽高比相同，因此标记会在原处并用图标或其他东西替换它。

请检查这张图片:

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

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"