ページに配置したCSSマップがあります。私はここから地図を得ました: http://freehtml5maps.com/documentation/SVG CSSマップを反応的にする
マップを私のページに置きました。それは全画面で上手く見えます。 http://www.amazingdg.com/_client/childusa/
しかし、ウィンドウのサイズが縮小すると、マップは応答しません。指示に従って、地図コンテナdivの幅が設定されている限り、地図はそれに合わせて縮小する必要がありますが、地図は960ピクセル幅にとどまっています。
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>
を中に存在し、ここで(メディアクエリの前に)
.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; }
Fiddle?または完全なコード? – YOU
freehtml5mapsサイトにはすべて元のコードがあります。 amazingdg.comサイトには、サイト上のコードがあります... – user3412194
そして私は上記の詳細情報を追加しました... – user3412194