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

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>

在SmartPhone视图中，我得到了半幅地图，并向左对齐，如下所示。

手机上的谷歌地图

我想应用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

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

1. 内联样式
2. iframe属性

从样式表重写内联样式的唯一方法是使用importance！关键字。阅读specificity以了解情况和克服它的一些方法:https://developer.mozilla.org/en-us/docs/web/css/specificity

您可能还必须使用important！关键字重写iframe width和height属性。

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

null

* {
  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>