擴大元素的點擊區域

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. 效果

擴大元素的點擊區域首發於聚享小站，如果對您有幫助，不要忘記點贊支持一下呦🎉