地圖設計中的響應標記

我正在研究一個具有圖像作爲地圖的設計，其上有一些絕對定位的標記。問題是我希望移動視圖上的縱橫比是相同的，因此標記將位於它的位置並用圖標或其他東西代替它。地圖設計中的響應標記

請檢查這一形象：

enter image description here

正如你看到的，下面的圖像中的標誌仍然在同一個地方。這是它在移動設備上的外觀。當然，我會用標記圖標替換它，因爲信息不可讀。

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; 
}

我們怎樣才能做到這一點？

感謝，

來源

2014-10-18 shadeed9

您可以通過使用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"

來源

2014-10-18 21:22:05 dafilipaj

它不會起作用，因爲寬度和高度上移動不同的，所以我們應該用百分比什麼的。 – shadeed9 2014-10-19 03:10:19

如果您爲各種屏幕尺寸提供@media，它應該可以工作。對於每種尺寸，您都可以提供不同的.marker風格。這可能會有所幫助：[鏈接]（http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-你的網頁/） – dafilipaj 2014-10-19 15:08:02

地圖設計中的響應標記

回答

相關問題