制作的SVG CSS地图响应

Question

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

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

但是，当窗口大小缩小时，地图不响应。根据该指令，只要在地图容器div的宽度设置，那么则应该缩小以适合它...但地图住在960像素宽度。

在1200像素宽度，我设置在容器宽度是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

尝试

@media (max-width: 1200px) { 
#svggroup svg { 
width: 800px; 
} 
} 

@media (max-width: 960px) { 
#svggroup svg { 
width: 600px; 
} 
} 

@media (max-width: 768px) { 
#svggroup svg { 
width: 400px; 
} 
} 

@media (max-width: 420px) { 
#svggroup svg { 
width: 200px; 
} 
} 

相应地更改地图宽度。