如何根据不同屏幕分辨率缩放与定位网页<video>元素？

问题描述 #

需要根据用户屏幕分辨率区间（如1800x1000-1920x1080、1200x800-1400x1000等），为<video>设置position: absolute的定位、宽高及边距样式，尝试使用media query但未成功，询问该方案是否可行，以及是否有更优实现方式。

原代码如下：

<html>

<head>
    <style>
         video {
            position: absolute;
            margin-top: -96%;
            margin-left: 980px;
            margin-right: 980px;
            width: 360px;
            display: none;
        }
     
      
    </style>

</head>

<body>
       
    <video id="PrintMusic" autoplay>        
        <source src="https://cdn.shopify.com/videos/c/o/v/1ef399dd4bb345e485f6e4784a9d0031.mp4">  
     
        Your browser does not support the video tag.
    </video>
</body>

<body>

    <button onclick="playVideo()">Play</button>

    <script type="text/javascript">

        function playVideo() {

            const video = document.querySelector('video');

            video.style.setProperty('display', 'block');

            video.play();

            const button = document.querySelector('button');

            button.style.setProperty('display', 'none');
        }
    </script>

</body>

</html>

解决方案 #

1. 你的方案完全可行，media query实现方式 #

media query支持通过min-width/max-width、min-height/max-height组合匹配分辨率区间，之前没成功大概率是语法或逻辑问题。

示例写法：

/* 匹配宽度1800px-1920px，高度1000px-1080px的屏幕 */
@media screen and (min-width: 1800px) and (max-width: 1920px) and (min-height: 1000px) and (max-height: 1080px) {
  video {
    margin-top: -80%;
    margin-left: 850px;
    width: 400px;
  }
}

/* 匹配宽度1200px-1400px，高度800px-1000px的屏幕 */
@media screen and (min-width: 1200px) and (max-width: 1400px) and (min-height: 800px) and (max-height: 1000px) {
  video {
    margin-top: -70%;
    margin-left: 500px;
    width: 320px;
  }
}

另外修复原代码的两个问题：

• 页面存在两个<body>标签，需合并为一个
• margin-right对绝对定位元素作用有限，可专注用margin-left/top或left/top属性定位

修改后的完整代码：

<html>
<head>
    <style>
        video {
            position: absolute;
            margin-top: -96%;
            margin-left: 980px;
            width: 360px;
            display: none;
        }

        /* 分辨率区间1800x1000-1920x1080 */
        @media screen and (min-width: 1800px) and (max-width: 1920px) and (min-height: 1000px) and (max-height: 1080px) {
            video {
                margin-top: -85%;
                margin-left: 880px;
                width: 380px;
            }
        }

        /* 分辨率区间1200x800-1400x1000 */
        @media screen and (min-width: 1200px) and (max-width: 1400px) and (min-height: 800px) and (max-height: 1000px) {
            video {
                margin-top: -75%;
                margin-left: 450px;
                width: 300px;
            }
        }
    </style>
</head>
<body>
    <video id="PrintMusic">        
        <source src="https://cdn.shopify.com/videos/c/o/v/1ef399dd4bb345e485f6e4784a9d0031.mp4">  
        Your browser does not support the video tag.
    </video>

    <button onclick="playVideo()">Play</button>

    <script type="text/javascript">
        function playVideo() {
            const video = document.querySelector('video');
            video.style.display = 'block';
            video.play();
            const button = document.querySelector('button');
            button.style.display = 'none';
        }
    </script>
</body>
</html>

2. 更优实现方式：相对单位适配 #

如果不想写大量media query，推荐使用相对单位（如vw/vh、百分比）或flex布局实现自适应，适配范围更广，无需逐个区间定义：

方式一：使用vw/vh相对单位

video {
    position: absolute;
    /* 宽度为屏幕宽度的20%，高度按比例自适应 */
    width: 20vw;
    /* 定位到屏幕右侧10%，顶部15%位置 */
    right: 10vw;
    top: 15vh;
    display: none;
}

方式二：flex布局居中定位（如果需要居中场景）

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

video {
    width: 30%;
    max-width: 400px;
    min-width: 280px;
    display: none;
}

这种方式下，video会自动在屏幕居中，宽度随屏幕缩放，同时限制最大/最小宽度避免变形。

内容的提问来源于stack exchange，提问作者Mellemo