最近的项目中做了一个“跑马灯”的抽奖特效插件。上篇文章已经分享过html
和css
的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在写这篇文章的时候,也顺便把自己的代码重构了一下。
这里主要是来写写自己的优化过程。俗话说:
一个程序猿的进步是从对自己的代码不满意开始的。
开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要用到的:
1.移动端1px像素线的问题
对于设计师给我的手机端网页的设计稿都是2倍图。按照道理来说,在写网页的时候,所有对象的实际尺寸都是会除2。但是对于1像素的线呢?
先来看两张图,设计稿的效果:
在三星 S4下的实际显示效果:
可以看到这个时候1px的线竟然显示不出来了。这个问题是跟 S4手机的屏幕像素密度有关。关于屏幕像素密度和1px 线的关系有很多文章介绍,可以自行搜索了解。我这里的解决方案是,对1px 的线不做处理。是多少就写多少。就算我的基础单位是rem
,也不是其它单位。
{
position: absolute;
width: 13rem;
height: 9.2rem;
border:1px solid #000;
}
2.pc 端浏览器和移动端浏览器容错率的差异
先来看一段代码:
$('[node-type=row-a').find('div');