巧用伪元素(:after/before)放大手机端点击焦点

Veröffentlicht am | Edited on | in

问题场景

我们在使用手机的过程中，是不是遇到过一些特别让你累的交互，就如手机端的按钮或图标老是点击不到，要多点击几次才能命中！

如何解决

手机的屏幕普遍比较小且分辨率高，这就导致设计的时候不能过大且要保持美观，严格按钮设计图尺寸开发后在手机端是会存在这样的问题。
那么怎么解决呢？不按照设计图切图?增加内边距撑大容器？这些方案都有或多或少不合理的地方，我有妙计可骚一把！

解决方案:after/before

通过设置点击元素的:after或:before伪元素大小来放大点击元素的点击区域

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 放大点击区域功能类 */
.nice-focus{
	position:relative;
}
.nice-focus::after{
	content:'';	
	position:absolute;
	width:80px;
	height:80px;
	top:50%;
	left:50%;
	margin-top:-40px;
	margin-left:-40px;
}

/*返回按钮*/
.back{
	width:12px;
	heigh:24px;
	background-image: url(/static/img/icon-back.png);
	background-size: 100% auto;
}

1
2
<!-- 页面使用 -->
<div class="back nice-focus">返回</div>

总结

很多看似不能解决问题，换个角度就可以轻松解决！此方法也同样适用于小程序开发。