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

我在我的网站上有一个谷歌地图部分作为我的联系页面。在我的浏览器中，地图的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>

---

如何使其正常工作？

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

内联样式

Iframe属性

从样式表重写内联样式的唯一方法是使用

important关键字。阅读
specification
了解正在发生的事情以及克服它的一些方法：

您可能还必须使用
重要提示关键字以覆盖iframe宽度和高度属性

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


*{
框大小：边框框；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.谷歌地图{
利润率：10px！重要；
}
.googlemap>iframe{
宽度：100%！重要；
高度：自动！重要；
最小高度：计算（100vh-20px）；
}
}

尝试设置width=“auto”什么也没有发生：（尝试删除所有内联样式并将其与此一起放置。响应性{width:100%；height:auto；}如果您的意思是
。谷歌地图{width:100%；height:auto；}
。不会改变。这不是问题，它仍然不起作用。我的最终设计目标是让地图填充移动屏幕，这样做应该减去
10px
边距。你的答案对我有用，但我必须删除以下代码才能工作
@媒体屏幕和（最小纵横比：13/9）{@viewport{最小缩放：宽度/（100*vw）；最大缩放：宽度/（100*vw）；用户缩放：0；}
。我可以将它们与您的答案合并吗？您正在进入一个不同的问题。您应该仔细阅读媒体查询，了解它们是如何协同工作的。我建议不要使用内联样式，而是使用更通用的iframe属性来简化此过程。这是避免
重要问题的最佳做法！
您可以在哪里找到它们n、 当然，我应该阅读查询。但是请回答，我可以合并我刚才提供的代码与您的代码吗？我需要我的网站，以适应移动设备
@media screen and (max-width: 600px) {
.googlemap{

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