评论

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

手机端点击区域过小,往往点不中,这里巧用伪元素::after放大点击区域,优化交互体验。

问题场景

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

如何解决

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

解决方案:after/before

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

示例代码如下:

/* 放大点击区域功能类 */
.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;
}
<!-- 页面使用 -->
<div class="back nice-focus">返回</div>

总结

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

最后一次编辑于  10-28  
点赞 4
收藏
评论