google mapのサイズのcssによる変更

質問

現在webページをスクリーンサイズによってPCとスマホにCSSを切り替えることによって
振り分けています、この場合google mapのサイズを切り替えたいのですがうまくいきません。

google mapは
<div id="map" style="width:606px; height:420px;">
のように指定しています。

やってみたのはPC用CSSをpc.css、スマホ用CSSをsm.cssとすると
<div id="pcmap">
<div id="map" style="width:606px; height:420px;">
</div>
<div id="smmap">
<div id="map" style="width:406px; height:420px;">
</div>
と記述し、それぞれのCSSでdisplay:none;したのですが無条件で2件目のmapが表示されないためうまくいきません、CSSに関わらず二重設置になるからだと思います。

なにかいい方法はないでしょうか？

回答No.1

ORUKA1951 · ベストアンサー

まず、HTMLが間違っています。
idは、ひとつの文書内に一つしかかけません。
「この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-id )」

・また、HTMLはデザインために書くものではありません

＞<div id="map" style="width:606px; height:420px;">
　HTMLのstyle属性での指定は、詳細度が a=1 ですので、外部スタイルシートやHTML内のスタイルシートでは上書きできません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Assigning property values, Cascading, and Inheritance( http://www.w3.org/TR/CSS2/cascade.html#specificity )］より

　もう一点、DOMは理解されていますか
　　　　　　　id
div　　　pcmap
　+ div 　map
　+ div 　smmap
　　+ div map
　firefoxをお使いなら、ツールにDOM inspector がありますので確認してください。たぶん想定されているものと異なるのではないですか?

　また、display:noneを指定すると、その子孫要素で他のnone以外を指定しても無効です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
none
　要素には、整形構造にまったくボックスを生成させない（すなわちレイアウトに影響しない）。 子孫要素にも同様にボックスを生成させない。 この効果は、子孫要素の'display'に別の値を設定しても無効化できない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#propdef-display )］より

　なぜ、スタイルシートを切り替えているのに、複雑怪奇なHTMLを書くのですか？
<div id="map"></div>
　でよいのでは？

　さらにいえば、スマホもパソコンもスクリーン端末(madia)です。普通にリキッドデザインで作成すればよいのでは？・・・・それとも今後さまざまな端末が登場するたびに、スタイルシートを作成する???