我有一个谷歌地图部分在我的网站为我的联系网页。在我的浏览器中，映射的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;
}
如何正确设置？
请注意在重新设计map组件时必须考虑的两件事：
从样式表重写内联样式的唯一方法是使用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>