目前我有一个视频.js视频播放器，在手机/平板电脑上查看时，我设法使其响应迅速，但是当我在桌面上查看它时，视频播放器延伸到与我的容器相同的宽度/高度。如何在桌面上指定固定宽度/高度，并在手机/平板电脑上查看时将其缩小？
索引.php
<div class="content">
<video id="my-video" class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls preload="auto" poster="" data-setup="{}">
<source src="video.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript and consider upgrading to a web browser that supports HTML5 video.</a>
</p>
</video>
</div>
在 CSS 中使用媒体查询并将容器类的宽度和高度更改为固定的宽度和高度
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
@media (min-width:481px) { /* css in here */ }
/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width:961px) { /* css in here */ }
/* Desktop up */
@media (min-width:1025px) { .container { width: 300px; height:300px; } }