h5 页面布局适配不同分辨率下固定按钮位置

问题提出：

在设计 H5 活动页面时，背景图上有一个固定位置的按钮，如何在不同分辨率下保证按钮始终出现在该位置？

解决方案：

可以使用 @media 媒体查询来实现不同分辨率的适配。具体步骤如下：

1. 为不同分辨率设置断点：

   @media (max-width: 320px) {}
   @media (min-width: 321px) and (max-width: 768px) {}
   @media (min-width: 769px) and (max-width: 1024px) {}
   @media (min-width: 1025px) {}

2. 在不同的断点下对按钮位置进行调整：

   @media (max-width: 320px) {
     .get_btn {
    bottom: 10rem;
     }
   }
   
   @media (min-width: 321px) and (max-width: 768px) {
     .get_btn {
    bottom: 15rem;
     }
   }
   
   @media (min-width: 769px) and (max-width: 1024px) {
     .get_btn {
    bottom: 20rem;
     }
   }
   
   @media (min-width: 1025px) {
     .get_btn {
    bottom: 25rem;
     }
   }

注意点：

• bottom 属性的值根据实际情况调整，以确保按钮出现在背景图上所需的固定位置。
• 对于宽度较小的移动端屏幕，可以考虑将按钮置于底部导航栏中，并使用 max-width 断点对其位置进行调整。