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

这为你的＆＃34;浮动面板创造了一个外包装＆＃34;并使内部内容响应视口的变化。

然后专门为您定位的移动查看者添加媒体查询。这是一个例子：

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

Proof of concept here in this BIN

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

如何使Google Maps API浮动面板响应？

1 个答案: