如何在移动模式下为谷歌地图模板设置不同的宽度答案

【问题标题】：How to set different width to Google Maps template when in mobile mode如何在移动模式下为谷歌地图模板设置不同的宽度
【发布时间】：2017-09-06 18:16:18
【问题描述】：

如何在移动模式下为 Google 地图模板设置不同的宽度？它非常适合我的桌面模式，但在移动模式下它会浮动屏幕大小。

这是我的代码：

@section ('map')  
<div id="map"></div>  

<script>
    function initMap() {
        var uluru = {lat: 32.063256, lng: 34.776371};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 18,
            center: uluru
        });
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });
    }
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByM5NtgUPSOLQg_oX_7LgEwEX5XyYO3zI&callback=initMap">
</script> 

@endsection

我的 CSS：

#map {
        height: 280px;
        width: 500px;
       }

【问题讨论】：

标签： html css twitter-bootstrap google-maps

【解决方案1】：

我使用 600 或 780 max-width 和 @media screen 来完成我所有的响应式设计。我允许你在不同的屏幕宽度上覆盖你的默认 CSS。

#map {
    height: 280px;
    width: 500px;
}

@media screen and (max-width: 600px) {
    #map {
        height: 140px;
        width: 250px;
    }
}

【讨论】：