H5活动页面布局，按钮使用定位固定位置，如何适配多种分辨率？

各位大佬，请问：
一张背景图，按钮是里面的一个元素，如何在不同机型不同分辨率下按钮都会出现背景图上面的固定位置？
rem、百分比、px 都试过了好像都不行！

 <style>
        body{
            font-size: 18px;
        }
        .box{
            height: 100vh;
            width: 100vw;
            background-image:url('/static/redCloud/images/buyerEvents.jpg');
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            /* 让背景图基于容器大小伸缩 */
            background-size: cover;
            position: relative;
        }
        .box .get_btn{
            width: 7rem;
            position: absolute;
            right: 3rem;
    bottom: 19rem;
        }
    </style>
<body>
    <div class="box">
        <img class="get_btn" src="/static/redCloud/images/buyerBtn.png" alt="立即领取">
    </div>
</body>

阅读 1.4k

为了在不同分辨率的设备上保持按钮的固定位置，你可以使用视窗单位（vw、vh、vmin、vmax）或百分单位，它们可以根据视窗的大小动态改变。

你的CSS中已经使用了视窗单位（vw、vh），但是你可能需要调整它们以适应各种屏幕大小。比如，你可以尝试调整.box的高度和宽度为更小的视窗单位，比如50vh和50vw，而按钮的位置可以继续使用rem或百分比单位，这样就可以在不同分辨率的设备上保持按钮的相对位置不变。

例如：

<style>
    body{
        font-size: 18px;
    }
    .box{
        height: 50vh;
        width: 50vw;
        background-image:url('/static/redCloud/images/buyerEvents.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        position: relative;
    }
    .box .get_btn{
        width: 7rem;
        position: absolute;
        right: 1rem; /* 调整为更小的视窗单位以适应各种屏幕大小 */
        bottom: 1rem; /* 调整为更小的视窗单位以适应各种屏幕大小 */
    }
</style>
<body>
    <div class="box">
        <img class="get_btn" src="/static/redCloud/images/buyerBtn.png" alt="立即领取">
    </div>
</body>

请注意，视窗单位（vw、vh）会根据屏幕的实际尺寸动态改变，因此如果背景图像的比例与视窗的比例不匹配，可能会导致背景图像的拉伸或压缩。为了避免这种情况，你可能需要使用一个不会拉伸或压缩的图片，或者使用CSS的其他特性来适应不同大小的屏幕。

H5活动页面布局，按钮使用定位固定位置，如何适配多种分辨率？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？