摘要: 一、使用bind方法(构造函数内绑定) 也可以onClick={this.handleClick.bind(this)};这种方法简洁明了,但由于 function函数 在每个render上重新分配,所以有性能影响。 二、使用箭头函数 三、在15版本中,可以使用React.createClass({ 阅读全文
posted @ 2018-09-12 23:40 DHeng 阅读(1101) 评论(0) 推荐(0) 编辑
摘要: 一、原因 固定定位是参考布局视口做定位的,而在移动端,存在布局视口、视觉视口、理想视口,如果适配方案使用不正确,很容易造成布局错误。 二、案例1,有问题版本,在唤起虚拟键盘的时候,布局错乱了。 三、案例2,绝对定位版本,布局没有错乱, 效果是没有错乱的,使用绝对定位,头部和尾部都是相对body进行定 阅读全文
posted @ 2018-09-11 23:38 DHeng 阅读(2966) 评论(0) 推荐(0) 编辑
摘要: 一、阻止默认事件 原因:1、避免长按文字时,选中了文字。 2、去掉橡皮筋效果,自己做。 二、阻止了默认事件,存在很多其他的事件效果也会失效,例如a标签的跳转等,此类情况可以针对某个元素进行绑定事件,同时阻止事件冒泡即可。 三、确定适配方案,常用适配方案:rem适配、viewport适配、百分比适配 阅读全文
posted @ 2018-09-10 23:45 DHeng 阅读(1586) 评论(0) 推荐(0) 编辑
摘要: 一、禁止电话和邮箱 <meta name='format-detection' content='telephone=no,email=no'/> 允许使用:<a href="tel:123456789120">123456789120</a>、<a href="mailto:123456789@q 阅读全文
posted @ 2018-08-30 23:29 DHeng 阅读(166) 评论(0) 推荐(0) 编辑
摘要: 一、全面阻止事件的默认行为 隐患:页面上所有的滚动条都失效,只能自定义滚动条。也阻止了a标签的跳转。 二、针对第一点,如果想针对某个元素不阻止默认行为,可以使用阻止冒泡方法来处理 三、事件点透原因 PC端的click事件在移动端是有效的,而且存在300ms的延时;然后类似触摸事件则是没有延时的;当元 阅读全文
posted @ 2018-08-30 21:37 DHeng 阅读(274) 评论(0) 推荐(0) 编辑
摘要: 一、移动端需要处理1物理像素的原因 原因是像素比,在设置了完美视口之后,像素比=物理像素/设备独立像素=物理像素/CSS逻辑像素,从而推导出:物理像素=像素比*CSS逻辑像素;例如,DPR为2的iphone6S,设置高度为1px(CSS逻辑像素),所以占用的物理个数=2*1px=2px,即是说高度为 阅读全文
posted @ 2018-08-28 22:25 DHeng 阅读(473) 评论(0) 推荐(0) 编辑
摘要: page{ height: 100%; } 阅读全文
posted @ 2018-08-28 20:40 DHeng 阅读(2467) 评论(0) 推荐(0) 编辑
摘要: 一、等比问题 问题:设置了meta标签的前提下,设计师以iphone5SE(640px*1136px)为基准原型设计了稿子,其中的一个div的尺寸为320px*40px,即是该div的宽度占布局视口宽度的1/2(0.5);如果该网页在iphone6S(750px*1334px)上预览,该div的宽度 阅读全文
posted @ 2018-08-28 20:16 DHeng 阅读(661) 评论(0) 推荐(0) 编辑
摘要: 一、屏幕尺寸 指屏幕对角线的长度,单位是英寸,1英寸=2.54cm 二、屏幕分辨率(物理像素) 指在横纵方向上的像素点,单位是px,1px=1个像素点。这里的1像素指的是设备的1个物理像素点。如第一点中的图,iphone6的分辨率为750*1334px,即是横向上有750个物理像素点,纵向上有133 阅读全文
posted @ 2018-08-26 14:15 DHeng 阅读(1250) 评论(0) 推荐(1) 编辑
摘要: 1 if(!/^[A-Za-z0-9\u4e00-\u9fa5]+/.test(value)){ 2 alert('不能输入非法字符') 3 } 阅读全文
posted @ 2018-08-20 15:49 DHeng 阅读(1320) 评论(0) 推荐(0) 编辑