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

作者站长头像
站长
· 阅读数 9

各位大佬,请问:一张背景图,按钮是里面的一个元素,如何在不同机型不同分辨率下按钮都会出现背景图上面的固定位置?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>

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

回复
1个回答
avatar
test
2024-06-26

话用 @media 吧,会稍稍麻烦一些,

更简单的办法:按钮做到图里面,整整一个足够大的透明按钮,

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容