2016-11-28 2 views
0

У меня есть карта CSS, которую я разместил на странице. Я получил карту отсюда: http://freehtml5maps.com/documentation/Выполнение SVG-карты CSS Ответственный

Я разместил карту на своей странице, и она отлично выглядит на весь экран. 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; } 
+0

Fiddle? или полный код? – YOU

+0

На сайте freehtml5maps есть весь исходный код. У сайта amazingdg.com есть код на сайте ... – user3412194

+0

И я добавил дополнительную информацию выше ... – user3412194

ответ

0

Попробуйте

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

Измените ширину карты.

+0

Awesome. Прекрасно работает. Я избегал играть со стилями svg, потому что я думал, что это может испортить картографирование. Хорошо работает. Благодарю. – user3412194

+0

Рад, что это помогло! – YOU

Смежные вопросы