CSS：我如何才能对此页面做出响应？

Question

我有这个地图上有动物，但它在手机/平板电脑和更高的桌面分辨率上看起来并不好看。 该页面位于：https://rianco.ro/map/

提前谢谢你， 甲

the screenshot is made with iphone6

    地图的代码是：

key(value)

在地图上添加动物的代码是：

.harta-links {width:60px;height:60px;position:absolute;background-color:#f00;background:url(https://rianco.ro/wp-content/uploads/2018/05/pin.png) center center no-repeat;background-size: contain;}
.harta-links:hover {margin-top:-4px;}
.harta-links img {width: 39px;margin: 2px 0px 0px 11px;}
 #zoom {width:20px; height:20px;border:1px solid #000;}

Answer 1

@media only screen and (max-width: 600px) {//Here set width on which you want to apply code bellow
   //Your css here for resolution under 600px
}

你可以研究一下css媒体查询的响应式布局。

以下是一些链接。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries