Question

我的网站上有一个谷歌地图部分，用于我的联系页面。在我的浏览器中，地图的 css 是

<div class="googlemap" style="margin-left: 50px; margin-right: 50px;">
<iframe style="border: 0;" src="map" width="50%" height="600" allowfullscreen="allowfullscreen">
</iframe>
</div>

在智能手机视图中，我得到了半图并在左侧对齐，如下所示。

Google maps on mobile

我想应用 CSS 使我的地图在移动设备上具有响应性。我尝试了类似以下的方法，但它不起作用

@media screen and (max-width: 600px) {
.googlemap{

  //these are the ideal margins for my mobile view
  margin-left: 10px;
  margin-right: -350px;
}

如何设置它正常工作？

Answer 1

请注意在重新设计地图组件时必须考虑的两件事：

内联样式
iframe 属性

从样式表覆盖内联样式的唯一方法是使用 important! 关键字。阅读 specificity 以了解正在发生的事情以及克服它的一些方法：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

您可能还需要使用 important! 关键字来覆盖 iframe 的宽度和高度属性。

我不知道您预期的最终设计应该是什么，但您可以执行以下操作：

* {
  box-sizing: border-box;
}
@media screen and (max-width: 600px) {
  .googlemap {
    margin: 10px !important;
  }
  .googlemap > iframe {
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 20px);
  }
}

<div class="googlemap" style="margin-left: 50px; margin-right: 50px;">
  <iframe style="border: 0;background: gray;" src="map" width="50%" height="600" allowfullscreen="allowfullscreen"></iframe>
</div>

CSS：移动设备上的响应式谷歌地图

1 个答案: