个人案例
Customizer
定制手机壳,3.9元起。
Customizer扫码体验
- onShareAppMessage 的 imageUrl 可以是base64吗?
onShareAppMessage 的 imageUrl 可以是base64吗? 我这里分享出去的是空白图片
2022-03-25 - 巧用伪元素(:after/before)放大手机端点击区域
问题场景 我们在使用手机的过程中,是不是遇到过一些特别让你累的交互,就如手机端的按钮或图标老是点击不到,要多点击几次才能命中! 如何解决 手机的屏幕普遍比较小且分辨率高,这就导致设计的时候不能过大且要保持美观,严格按钮设计图尺寸开发后在手机端又过小导致点击事件无法触发。 那么怎么解决呢?不按照设计图切图?增加内边距撑大容器?这些方案都有或多或少不合理的地方,我有妙计可骚一把! 解决方案: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> [代码] 总结 很多看似不能解决问题,换个角度就可以轻松解决!此方法也同样适用于小程序开发。
2019-10-28