css - 手机上的视频宽度
问题描述
我在 Elementor 插件的背景部分添加了视频。在桌面上它可以完美地缩放和工作,但在移动视频上被裁剪并且不适合屏幕。
我尝试在 chrome 控制台中设置一些值,例如 max-width: 100%; 宽度:自动;宽度:适合内容;以及我在 google 中找到的一些其他提示(我还在学习 css)
我想这是 CSS 的一部分,我应该在其中设置宽度,但它不起作用。
@media (max-width: 767px)
.elementor-15 .elementor-element.elementor-element-1e70f52 {
padding: 50px 30px 50px 30px;
}
我想让视频宽度适合设备屏幕而不被裁剪。
解决方案
我认为以下媒体查询格式会对您有所帮助。将您的视频标签宽度和高度大小放入以下媒体查询中。
<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>
推荐阅读
- bash - 为什么 Gitlab CI 在本地而不是在远程机器上运行命令?
- mysql - 具有相同名称的多个 MySQL 键的含义
- java - 对象中的Java逗号分隔值需要将其添加为列表中的两条记录
- javascript - JsPDF 生成一个空白 PDF
- spring - Spring OpenFeign 在添加 pkcs12 证书后执行错误的 RequestParam 编码
- html - 如何添加下拉菜单
- linux - Bash base64 有一个额外的字符,而不是一个 equals 与 powershell
- ios - Swift UI - LazyVGrid 和 ForEach - 不能使用重复项
- python - 使用 Websocket Connect 从 Python 程序调用 Rhasspy 失败
- javascript - Visual Studio 代码文件“Index.html”未在 CHROME 中打开