手机上的视频宽度

【问题标题】：Video width on mobile手机上的视频宽度
【发布时间】：2019-12-31 15:16:48
【问题描述】：

我在 Elementor 插件的背景部分添加了视频。在桌面上它可以完美地缩放和运行，但在移动端视频被裁剪并且不适合屏幕。

我尝试在 chrome 控制台中设置一些值，例如 max-width: 100%;宽度：自动；宽度：适合内容；以及我在 google 中找到的其他一些技巧（我还在学习 css）

我猜这是 CSS 的一部分，我应该在其中设置宽度，但它不起作用。

@media (max-width: 767px)
.elementor-15 .elementor-element.elementor-element-1e70f52 {
    padding: 50px 30px 50px 30px;
}

我想让视频宽度适合设备屏幕而不被裁剪。

【问题讨论】：

将此用于移动尺寸：width: 100%; min-height: 100vh;

标签： css wordpress video mobile elementor

【解决方案1】：

我认为以下媒体查询格式会对您有所帮助。将您的视频标签宽度和高度大小放入以下媒体查询中。

<style>

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {  

  /* Your CSS Code for this device size */    

 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {  

   /* Your CSS Code for this device size */    

 }

 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {  

   /* Your CSS Code for this device size */    

 } 

 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {  

  /* Your CSS Code for this device size */    

 }      

 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {

  /* Your CSS Code for this device size */ 

 }

 /* According to Mobile Orientation */
 @media only screen and (orientation: landscape) {   

    /* Your CSS Code for this device orientation */    

 }

</style>

【讨论】：