demo总结

最近在模仿做一个点击打开链接这样的demo，整个过程中学习了很多东西，现在总结如下：

1.动态设置font-size结合rem实现自适应布局
a.动态获取屏幕的width和height，并计算出它们与设计稿（这个demo以iPhone5的尺寸为原始尺寸320x568px）宽高的比例，取两个比例的最小值（scale）。
b.原始font-size为100px，新的font-size为：sacle*100px；
c.所有元素尺寸单位使用rem，rem是相对于根元素文本大小的一个相对单位。

var sacle = Math.min(window.innerWidth / baseWidth, window.innerHeight / baseHeiht),//获取宽、高比的最小值
newSize = parseInt(sacle * 10000 * baseFontSize) / 10000;//新的font-size为最小比与原始font-size的乘积

2.容器元素的居中处理
容器元素的居中处理由相对与左上角的定位，改为相对于屏幕中心定位。以保证在不同的屏幕尺寸下，容器元素仍然居中。

position: absolute;
left: 100px;
top: 50px;

变为

position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;

3.动画的嵌套

1.很多元素以一个整体动画效果出现，然后各个元素分别拥有各自的动画，可以分两种方式处理：
a.子元素很少时，可以将整体动画效果写入各自的animation中：

.sec1_qq
{
-webkit-animation: fadeIn 1s, shake 1.5s 1s infinite;//首先1s动画出现，然后shake。shake动画延迟相应的时间。
animation: fadeIn 1s, shake 1.5s 1s infinite;
}

b.子元素较多时，使用一个容器元素将共同出现的元素包裹。将公用动画放在容器元素中。
2.关于transform
transform是一个属性，后面的赋值会覆盖掉前面的值。
解决方法：使用一个容器元素将动画元素嵌套，将animation分解到容器元素和动画元素上。

4.使用margin-top后，父元素随之移动

设置元素的margin-top后，父元素的位置和子元素一起移动
解决方法：将父元素的overflow设置为hidden。

5.雪碧图

对于使用雪碧图的元素，它的尺寸一定要尽量准确，不然在不同尺寸下会显示出其他的图像。
iPhone5下正常显示： ipad下显示出了其他部分图像：





6.命名篇
刚开始错误的做法：
a. 只顾当前页面。比如在第一个section中对标题命名为title，那么接下来的五个section的标题就要各种混乱。
b. 简单的使用一些名词，和内容没有任何联系。
正确做法：
a. 在名称中加入父元素的缩写，比如：sec1_title,sec2_title。
b. 对于需要读入img的图像，应该保持元素名称和图像名称一定的关联性，从而提高代码的可读性。

7.对于重复部分的模块化
在6个section中，有一个带有星星闪烁的qq图像出现了三次。对于这种重复性的效果，应该模块化。在模块内部对元素进行效果设置，避免对父级元素的定位等。

8.星星闪烁和翅膀挥舞不停效果
通过对animation的持续时间和delay时间的不同设置产生了blingbling效果。

9.animate.css
animate.min.css中已经定义好了很多动画效果，https://github.com/daneden/animate.css 我们只需按照下面步骤使用：

a.在html文件中引用animate.min.css
b.将animated和相应的动画名称写入到元素的类名。

<h1 class="animated infinite bounce">Example</h1>

也可以像使用自定义动画一样使用它们，编辑相应的属性。
10.iSlider
iSlider是一个表现出众，无任何依赖的mobile设备滑动组件。 http://www.qianduan.net/islider-yi-dong-duan-webapp-hua-dong-di-zui-you-jie-jue-fang-an/ 按照以下步骤使用：

a.准备一个dom节点用来存放slider
b.准备好相应的数据
c.调用的时候实例化