css - 如何用css实现手机上video的width=device的width，电脑上video的width=600px的html

问题描述

我正在使用 css 来更改在网页中播放的视频的宽度。我想在手机上制作视频的宽度=设备的宽度，在电脑上制作视频的宽度=600px。但我失败了。

html是：

<head>
 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
  <video width='600'  poster='Monument_Valley2_Cover.jpg' controls>
     <source src='Monument_Valley2.mp4' type='video/mp4'>
  </video>
</body>

我不想使用“user-scalable=yes”，也不想让网页在手机上看起来很小。当我指定视频宽度=600px时，视频宽度总是超过手机上的设备宽度。我失败了。我如何使用 css 来实现这一点？非常感谢。

标签： css

您可以使用媒体查询来设置视频的宽度。检查此链接以查看示例-> css-media-queries

@media (max-width:767px) {
  video {
    width: 100% !important;
  }
}

请注意，我必须使用!important覆盖您为视频设置的内联样式宽度。如果您使用 CSS 为其他分辨率设置 600px 的宽度，则不需要重要。

css - 如何用css实现手机上video的width=device的width，电脑上video的width=600px的html

问题描述

解决方案

推荐阅读