个人前端日志

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小

只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值

以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验

Canvas绘制图片层级的小技巧

禄小伟
8410
2018年01月10日
最近在策划一款狗年的H5,由于微信规定禁止诱导分享,但是又想要更好的传播效果,怎么办呢?最终选择了曲线救国,让最终的页面转换为图片带有H5的二维码,听上去很熟的套路吧,很多友商已经在用了,各家实现的方式也不一样,有用PHP实现的,也有用Canvas转image实现的,这里我们采用的是第二种。第二种方法将压力全部转移到前端,Canvas中绘制图片我们会用到 img.onload = function(){}; 方法,但是多个图片绘制的时候会有层级问题,如果先绘制的图片过大就会把后面绘制的图片遮盖住

javascript随机一个范围内的数

禄小伟
3510
2018年01月08日
很多时候我们需要在一个范围内随机数字,例如0~100内的数字,该如何编写看下面代码:function RandomNumBoth(Min, Max) {  // Min 最小数  Max 最大数     var Range = Max - Min;     var&

经过百度、谷歌、SF、stackoverflow后终于将webpack3引用jQuery的问题解决了,网上的重复文章太多,大多也都过时了,webpack这两年发展也非常快,大多都是1.0版本的文章,与时俱进的很少,刚刚看了一眼现在已经发展到3.5.5了,真正看其中一篇文章能解决问题的几乎没有,下面是webpack3的实现代码

-webkit-filter:blur属性对于PC端来说非常好用,高斯模糊效果特别棒,但是这个效果用在移动端的时候就心有余而力不足了,由于硬件限制,移动端的硬件渲染速度会非常耗费资源所以导致卡顿,如果想要实现这种效果,建议移动端使用两张图片,一张高斯模糊后的效果,另一张是清晰的图片,交换显示,这样就可以模拟出高斯模糊渐渐清晰的效果了,前端路上也一样要学会举一反三,条条大路通我家!

轻松化解iOS系统及微信中不支持audio自动播放问题

最近在做一年一度的大辽盛典移动端项目,需要为H5配一段背景音乐且要自动播放,按照以往的方法将自动播放代码加入进去就可以了,可以却发生了点小插曲(捂脸)

微信小程序排坑指南

禄小伟
13772
2016年11月24日

weixinfangkeng.jpg

背景图不显示微信小程序里面是允许用户自定义背景图的,但是限定了背景图的路径及地址,之前一直用相对路径来写,微信开发者工具中也显示出了背景图,误以为没有问题,但是预览的时候发现手机中不显示背景图,这就是今天介绍的第一个坑,背景图不允许为本地图片。解决方法是...

具有划时代意义的一篇文章

禄小伟
5788
2016年11月16日
说他具有划时代意义,是因为他承载了整个网站的文章测试的作用,没有他就没有其他文章的页面排版,没有他就没有其他文章的精美样式,没有他就没有了一切! 第一部分其实是为了明确段落

wx.png

虽然我研究苹果比较多,但是大家总是把小程序和App放在一起比,因此我也花时间看了一下小程序的开发指南,尤其是UI部分的设计和原则,今天就拿它和苹果的HIG(Human Interface Guidelines)做个比较,其实两者在一些大的原则处理上可以说是一致的。

jsbind.png

最近在做购物频道的时候使用了cxselect多级联动插件,而这个插件使用到了“bind”方法,IE10以下的浏览器,如果在JS代码中用了bind函数,那么就会报“SCRIPT438: 对象不支持“bind”属性或方法,因为浏览器没有提供这个参数的方法,要解决这个问题就需要我们自己写一个“bind”方法,来让这个参数生效。

Powered By Z-BlogPHP 1.6.7 Valyria

Copyright webexp.cn Rights Reserved.

本站基于 阿里云服务器 + Ename域名 + Z-Blog 构建   |   站点地图   |