Question

我有一张放在页面上的CSS地图。我从这里得到了地图： http://freehtml5maps.com/documentation/

我将地图放在我的页面上，全屏看起来很好。 http://www.amazingdg.com/_client/childusa/

但是，当窗口大小缩小时，地图不会响应。根据说明，只要设置了地图容器div的宽度，那么地图应该缩小以适应它......但是地图的宽度保持在960px。

在宽度为1200px时，我将容器宽度设置为740px ......但是地图没有缩小（即使通过容器也是如此）。

@media (max-width: 1200px)
.statebox-wrap {
    width: 740px;
}

谁能告诉我我做错了什么？

以下是用于css地图的脚本......我不认为这些都是错误的。我认为问题存在于CSS代码中（下面）

  <!-- End Jquery -->
  <link href="http://www.amazingdg.com/_client/childusa/lg-map/map.css" rel="stylesheet" type="text/css" />
  <script src="http://www.amazingdg.com/_client/childusa/lg-map/raphael.js" type="text/javascript"></script>
  <script src="http://www.amazingdg.com/_client/childusa/lg-map/scale.raphael.js" type="text/javascript"></script>
  <script src="http://www.amazingdg.com/_client/childusa/lg-map/lg-map.js"></script>

这是相关的CSS样式（在媒体查询之前）

.statebox { display:inline-block; width:100%; min-height:100px; color:#FFF; text-align:center; margin-bottom:40px; padding-bottom: 20px; }
    .statebox-wrap { max-width:960px; margin:0 auto; padding: 20px 0; }
    .stateboxtitle { color:#FFF; font-size:30px; padding:20px 40px 0 40px; line-height:1.2; }
        .stateboxtitle span { font-size:22px;line-height:1; }

Answer 1

尝试

.highlight-front a{ 
   color: blue;
}

相应地更改地图宽度。

使SVG CSS映射响应

1 个答案: