8

扩大元素的点击区域

 2 years ago
source link: https://www.fly63.com/article/detial/11251
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
更新日期: 2022-03-10阅读量: 21标签: 元素分享

扫一扫分享

有时候我们在做移动端业务的开发时，会遇到这样的问题：我们按照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://www.fly63.com/article/detial/11251


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK