问题背景

有时候我们在做移动端业务的开发时，会遇到这样的问题：我们按照UI设计稿画好了页面，但是在验收功能时，发现在小屏幕手机上有些按钮不好点击，可是UI同学又不希望我们调整按钮的大小，破坏了他的设计。下面提供一种方法，既可以不改动UI，又可以调整点击的热区。

方法

<button id="btn">btn</button>

#btn {
    position: relative;
}

#btn::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

原理其实很简单，伪元素相对于button进行四个方位的拉伸，这样不仅不会破坏布局，还达到了目的。

来自：https://www.86886.wang/2022/02/18/扩大元素的点击区域/

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/11251