03 2017 档案
摘要：fis3 scss编译需要安装的node版本为4.x,node版本高了fis会报错。如下图所示：
阅读全文
摘要：移动端布局： rem方案：页面中的任何元素都采用rem布局，包括字体。 html的font-size大小是根据移动设备自动计算的。 设计师完成的设计稿宽度为：750px，此时html跟节点的大小是50px，其他元素根据这个基准值设置rem大小。 html设置基准字体大小的测试地址为：http://3
阅读全文
摘要：网站网页在遇到浏览器低版本（尤其是IE浏览器）时，提示浏览器版本低（如IE8以及以下），建议用户升级浏览器以获得最好体验。以下是代码： IE8浏览器下效果，点击“这里”用户跳转到http://browsehappy.com/，根据用户喜好的浏览器可以在线更新浏览器： 更新浏览器的下载地址是：http
阅读全文
摘要：请先测试代码： 尤其注意： Math.round(-1.5);//-1 原理是： 实际上，Math.round()方法准确说是“四舍六入”，对0.5要进行判断对待。 Math.round()的原理是对传入的参数+0.5之后，再向下取整得到的数就是返回的结果。这里的向下取整是说取比它小的第一个整数或者
阅读全文
摘要：margin-right:负值，在没有设置DOM元素宽度的前提下，DOM元素宽度变宽。 效果： 具体原理请看代码注释。 注：padding不允许使用负值。
阅读全文
摘要：根据canisue（http://caniuse.com/#search=box-shadow），box-shadow兼容性如下图所示： 测试代码： IE8浏览器效果： border-radius在IE8浏览器兼容方案： IE8浏览器下效果： PIE.HTC下载地址：http://css3pie.c
阅读全文
摘要：根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示： 测试代码： IE8浏览器效果： border-radius在IE8浏览器兼容方案： IE8浏览器下效果： PIE.HTC下载地址：http://css
阅读全文
摘要：根据CANIUSE（http://caniuse.com/#search=download）download兼容性如下图所示： 如上图所示，IE浏览器是不支持的。 1、测试代码： 2、效果： 并且下载的压缩包文件中没有123.docx。 3、兼容性处理 将文件123.docx（其他文件一样处理）压缩
阅读全文
摘要：1、代码（未添加GPU加速代码） F12控制台Timeline记录： 2、代码（添加GPU加速代码） F12控制台Timeline记录： 3、代码（添加GPU加速代码） F12控制台Timeline记录： 总结：好像没有什么大的优化，渲染和绘制时间差的不多。需要继续研究。 附：timeline用法
阅读全文
摘要：1、兼容性 根据canius（http://caniuse.com/#search=transition），transition 兼容性如下图所示： 在IE7-9进行测试时，transition的效果没有过渡效果（如线性过渡效果），但是还是有效果（立即执行transition-property，tr
阅读全文
摘要：针对 IE8 仍然需要额外引入 Respond.js 文件以支持媒体查询（media query）。 1、http协议下效果（如：http://192.168.12.40:8020/bootstrap/index.html）： 2、file文件协议IE8下效果（如：C:\Users\dell\Doc
阅读全文
摘要：总结： （1）IE5 IE6 IE7 IE8 IE9 IE10 在属性值后加\9 （2）IE8 IE9 IE10 在属性值后加\0 （3）IE9 IE10 在属性值后加\9\0 （4）IE6 IE7 在属性前加星号 （5）IE6 在属性前加下划线号 以上均可通过上述代码测试。
阅读全文
摘要：根据caniuse（http://caniuse.com/#search=gradient），gradient兼容性为IE10以及以上浏览器。 实例代码： chrome浏览器效果： IE8浏览器效果（无渐变）： gradient兼容性处理： 设置filter属性目的是上一行的透明度不起作用的时候执行
阅读全文
摘要：根据caniuse（http://caniuse.com/#search=rgba），rgba兼容性为IE9以及以上浏览器。 实例代码： chrome浏览器效果： IE8浏览器效果（无背景）： rgba兼容性处理： 设置filter属性目的是上一行的透明度不起作用的时候执行，filter: prog
阅读全文
摘要：2017.7.5更新： 在处理IE8兼容性问题上，对于背景图片比背景框还大的情况，还需要做一下处理： 根据canius（http://caniuse.com/#search=background-size），background-size兼容性为IE9以及以上浏览器，如下图所示。 实例代码： 效果：
阅读全文
摘要：Bootstrap作为目前很受欢迎的前端框架，越来越多的网站开始使用基于Bootstrap框架进行开发。 1、定制开发方法 （1）Bootstrap定制开发可以使用LESS和Grunt实现定制化 （2）在线实现定制化开发，地址为：http://v3.bootcss.com/customize/ 2、
阅读全文
摘要：CSS实现垂直居中的方法 1、relative+absolute定位： (1)css+html代码 (2)效果 (3)兼容性 兼容全部浏览器 2、flex布局： (1)html+css代码 (2)效果 (3)兼容性 根据caniuse（http://caniuse.com/#search=flex）
阅读全文