如何使用Bootstrap实现谷歌地图iFrame自适应？有无更简洁方案？

优化方案 #

你当前的写法存在两个明显问题：

• 代码冗余：完全相同的iframe重复写了5次，维护成本高
• 性能损耗：浏览器会同时加载5份相同的地图资源，浪费带宽，拖慢页面加载速度

只需要保留1份iframe，通过CSS媒体查询匹配Bootstrap断点控制不同屏幕下的宽高即可，效果和现有实现完全一致，代码量可减少80%。

简化后的HTML代码

<div class="container map">
  <iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&amp;#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" 
    style="border:2px solid rgb(0, 183, 255);" 
    allowfullscreen="" 
    loading="lazy"
  ></iframe>
</div>

配套CSS代码

/* 基础样式：避免iframe溢出容器 */
.map iframe {
  max-width: 100%;
}

/* xs屏幕：<576px */
@media (max-width: 575.98px) {
  .map iframe {
    width: 300px;
    height: 300px;
  }
}
/* sm屏幕：576px ~ 767px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .map iframe {
    width: 530px;
    height: 400px;
  }
}
/* md屏幕：768px ~ 991px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .map iframe {
    width: 700px;
    height: 400px;
  }
}
/* lg屏幕：992px ~ 1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .map iframe {
    width: 900px;
    height: 600px;
  }
}
/* xl屏幕：≥1200px */
@media (min-width: 1200px) {
  .map iframe {
    width: 1100px;
    height: 600px;
  }
}

内容的提问来源于stack exchange，提问作者Магомед Рабаданов