css - 有什么方法可以在 Bootstrap 中使 html5 音频响应？

Question

我有一个简单的 HTML5 音频播放器，我想在 Bootstrap 中进行响应。

    <div class="col-sm-4 col-sm-offset-4">
      <audio controls style="width: 600px;">
        <source src="sample.mp3">
      </audio>
    </div>

有没有办法让包含这个音频播放器的 div 响应，不管里面有什么内容，或者至少是一个类或什么让音频播放器响应？如果可能，希望不必使用外部库。

谢谢!

Answer 1

我建议使用 width:100% 和 max-width:600px。 当您在桌面浏览器中缩小窗口时，您将不会像在真实移动设备上那样看到它，但移动设备(即 iOS、Android)上的音频元素肯定会变小——您不会对其外观有很大的影响。与这些设置一起，它应该能够适本地适应几乎任何情况。

(您可能只想添加第二个 source 标签，其中包含 ogg 格式的音频，并在源标签中添加文件格式，请参见 https://www.w3schools.com/tags/tag_audio.asp )