如何设计一组可适配屏幕6个固定位置的button或span对象

你要的效果可以通过CSS固定定位+视口单位轻松实现，不用复杂的适配逻辑就能兼容不同尺寸的屏幕，示例代码如下：

实现代码 #

HTML

<button class="fixed-btn pos1">左上按钮</button>
<button class="fixed-btn pos2">右上按钮</button>
<button class="fixed-btn pos3">左中按钮</button>
<button class="fixed-btn pos4">右中按钮</button>
<button class="fixed-btn pos5">左下按钮</button>
<button class="fixed-btn pos6">右下按钮</button>

如果用span元素替换button，直接改标签即可，CSS样式通用。

CSS

.fixed-btn {
  position: fixed;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background: #409eff;
  color: #fff;
  cursor: pointer;
  z-index: 999;
}

/* 6个位置配置，数值可按需调整 */
.pos1 {
  top: 5vh;
  left: 5vw;
}
.pos2 {
  top: 5vh;
  right: 5vw;
}
.pos3 {
  top: 50vh;
  left: 5vw;
  transform: translateY(-50%);
}
.pos4 {
  top: 50vh;
  right: 5vw;
  transform: translateY(-50%);
}
.pos5 {
  bottom: 5vh;
  left: 5vw;
}
.pos6 {
  bottom: 5vh;
  right: 5vw;
}

说明 #

• position: fixed让元素始终相对于浏览器视口定位，页面滚动也不会偏移
• 用vw/vh视口单位做定位值，会自动跟随屏幕尺寸缩放，不需要额外写媒体查询适配
• z-index保证元素不会被其他页面内容遮挡，有更高层级元素时可自行调大数值

内容的提问来源于stack exchange，提问作者Trần Công Toản