如何使 Google 地图 API 浮动面板具有响应性？

Question

手机上的地图图片： Map

我尝试了以下 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; 
   }
 }

Proof of concept here in this BIN

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