0

3 つの と、次の CSS を使用したdivこの Google マップコードがあります。iframe

#contact_map { border-radius: 200px; width: 320px; height: 320px; overflow: hidden; max-width: 100%; position: relative; right: 0px; }
#contact_map_fake { border-radius: 200px; width: 320px; height: 320px; top:0px;
    box-shadow: inset 0px 3px 5px 1px rgba(0, 0, 0, .5); pointer-events:none; position: absolute; border: 1px solid rgba(255,255,255,.6);
}
#contact_map_container { border-radius: 200px; overflow: hidden; width: 320px; height: 320px;   }

diviPhone でページを表示したときにマップが他の s の下にジャンプするように、CSS を変更してこれをレスポンシブにするにはどうすればよいですか?

4

2 に答える 2

2

@media タグを使用して CSS でこれを行うことができます

@media screen and (max-width: 480px) and (orientation: portrait){
  /* some CSS here */
  /*define css for all divs*/

}

/* #### Mobile Phones Landscape #### */
@media screen and (max-width: 640px) and (orientation: landscape){
  /* some CSS here */
  /*define css for all divs*/
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-width: 640px){
  /* some CSS here */
  /*define css for all divs*/
}
于 2013-05-09T10:40:56.723 に答える