html - 响应式 iframe 中的三个 div

Question

我有三个s 和这个带有以下 CSS 的div谷歌地图代码：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;   }

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

Answer 1

您可以使用 @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*/
}

Answer 2

使用 CSS 媒体查询 @media

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