我有这张 map ，上面有动物，但在手机/平板电脑和更高的桌面分辨率上看起来不太好。 页面在这里:https://rianco.ro/map/
先谢谢你， 一个
the screenshot is made with iphone6
map 的代码是:
.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;}
在 map 上添加动物的代码是:
<img class="aligncenter" src="https://rianco.ro/wp-content/uploads/2018/05/harta_mare-1.jpg" alt="">
<div id="link-1" class="harta-links multilinks" style="top: 210px; left: 338px;"><img src="https://rianco.ro/wp-content/uploads/2018/05/thumb_barza-alba.png"> <a class="harta-links suplimentar" style="top: 0px; left: 0px;" href="/atlas/barza-alba">
<img src="upload/caroline.png"></a> <a class="harta-links suplimentar" style="top: 0px; left: 0px;" href="/atlas/gasca-canadiana"><img src="upload/gasca-canadiana.png"></a></div>
<a id="link-2" class="harta-links" style="top: 262px; left: 154px;" href="/atlas/cangur-dama"><img src="upload/thumb/thumb_cangur-dama.png"></a> <a id="link-31" class="harta-links" style="top: 332px; left: 958px;" href="https://rianco.ro/python/"><img src="https://rianco.ro/wp-content/uploads/2018/05/thumb_antilopa-eland.png"></a> <a id="link-32" class="harta-links" style="top: 312px; left: 916px;" href="https://rianco.ro/python/"><img src="https://rianco.ro/wp-content/uploads/2018/05/thumb_calul.png"></a> <a id="link-33" class="harta-links" style="top: 287px; left: 874px;" href="https://rianco.ro/python/"><img src="https://rianco.ro/wp-content/uploads/2018/05/thumb_cerb-lopatar.png"></a> <a id="link-34" class="harta-links" style="top: 268px; left: 831px;" href="https://rianco.ro/python/"><img src="https://rianco.ro/wp-content/uploads/2018/05/thumb_zebra.png"></a> <a id="link-35" class="harta-links" style="top: 243px; left: 777px;" href="https://rianco.ro/python/"><img src="https://rianco.ro/wp-content/uploads/2018/05/thumb_strut-emu.png"></a>
<a id="link-35" class="harta-links" style="top: 213px; left: 807px;" href="https://rianco.ro/python/"><img src="https://rianco.ro/wp-content/uploads/2018/05/thumb_zebu.png"></a>
最佳答案
@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
关于CSS:我怎样才能让这个页面响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50326013/