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.调用的时候实例化