html - 将宽度和高度设置为响应式谷歌地图?

标签 html css google-maps responsive-design

为了能够查看 Google map ,我必须将高度设置为像素值。我可以将宽度设置为 100%,它几乎是响应式的,但不是高度。我以为我可以根据不同的媒体查询为高度设置不同的值,但这不起作用。任何想法如何解决这个问题。我只想在移动设备上使用较小的高度,在桌面设备上使用较大的 map 。

我使用的 CSS:

#map-canvas
{
width: 100%;
height: 200px;
}

最佳答案

媒体查询完美运行。

<a href="http://jsfiddle.net/3Vma6/8/" rel="noreferrer noopener nofollow"> look here </a>

尝试用里面的 map 调整窗口大小。

关于html - 将宽度和高度设置为响应式谷歌地图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20029709/

相关文章:

html - 如果输入验证失败,则在没有 js 的情况下更改标签的颜色

javascript - 单击按钮元素时如何更新属性?

google-maps - 嵌入式谷歌地图缩小/不居中并且通常有错误

javascript - asp.net 如何自动启用浏览器位置设置

html - 在 IE 6 或 7 中使用 AJAX 加载 HTML 时,处理样式标签的最佳方式是什么?

javascript - 使用 Javascript 显示重量

css - 为移动网站制作可滚动的嵌套 Div

android - 是否可以更改 Android Maps V2 中的 map 字体?

css - Ionic 2 和带有左右文本的 ion-item

javascript - 添加 Bootstrap 轮播组件