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

Question

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

这是我的代码:

@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;
       } 

Answer 1

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

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

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