有什么方法可以在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)