关于css:扩大元素的点击区域

1. 问题背景

有时候咱们在做挪动端业务的开发时，会遇到这样的问题：咱们依照UI设计稿画好了页面，然而在验收性能时，发现在小屏幕手机上有些按钮不好点击，可是UI同学又不心愿咱们调整按钮的大小，毁坏了他的设计。上面提供一种办法，既能够不改变UI，又能够调整点击的热区。

2. 办法

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

#btn {
    position: relative;
}

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

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

3. 成果