如何使Google Maps API浮动面板具有响应能力？

Question

手机上的地图图片： 地图

我尝试了以下Css和HTML，但是当在移动设备上使用地图时，无法显示浮动面板。 有什么我可以更改CSS或html中的内容来使浮动面板响应的吗？

 #origin-input, #destination-input { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 200px; } 

 <div id="content"> <input id="origin-input" class="controls" type="text" placeholder="Enter an origin location"> <input id="destination-input" class="controls" type="text" placeholder="Enter a destination location"> <div id="mode-selector" class="controls"> <input type="radio" name="type" id="changemode-walking" checked="checked"> <label for="changemode-walking">Walking</label> <input type="radio" name="type" id="changemode-transit"> <label for="changemode-transit">Transit</label> <input type="radio" name="type" id="changemode-driving"> <label for="changemode-driving">Driving</label> </div> </div> <div id="right-panel"></div> <div class="col-xs-12"> <div id="map"></div> </div> 

Answer 1

如果我正确理解您的问题，请首先将display: flex添加到外部容器，如下所示：

#content {
display: flex;
flex-flow: wrap;
flex-direction: row; 
}

这将为“浮动面板”创建一个外部包装，并使内部内容响应视口的变化。

然后添加专门针对您定位的移动观众的媒体查询。 这是一个例子：

 @media only screen and (min-width: 320px) and (max-width: 500px){
   #content {
    flex-direction: columnn; 
   }
 }

此BIN中的概念证明

只需调整输出窗口的大小即可看到效果。