Question

我有三个div和此Google地图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上查看页面时，地图会跳到其他div下？

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

响应式iframe中的三个div

2 个答案: