响应式 iframe 中的三个 div

Question

我有三个divs 和这个谷歌地图iframe 代码与以下CSS：

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

如何更改 CSS 以使其具有响应性，以便当我在 iPhone 上查看页面时地图跳转到另一个 divs 下？

Answer 1

你可以在 css 中使用 @media 标签来做到这一点

@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*/
}

Answer 2

使用css媒体查询@media

   @media all and (max-width: 640px){
 #contact_map{
width: 100%;
height: 100%;
}
}