H5+JS+CSS3 实现圣诞情缘--学习心得1

1.编程思路

rem布局代替百分比布局方案
http://caibaojian.com/web-app-rem.html
观察者模式的处理机制
http://www.cnblogs.com/wangjq/archive/2012/07/12/2587966.html
svg绘制矢量图
https://www.ibm.com/developerworks/cn/web/wa-scalable/
canvas绘图
http://www.w3school.com.cn/tags/html_ref_canvas.asp
http://blog.csdn.net/u014607184/article/details/51746384

2.rem布局学习心得

px是绝对单位；em是相对父级元素font-size大小的单位；

rem是font size of root element,相对于根元素html下font-size的单位。

流式布局：用百分比定义宽度，高度用px固定。很难实现跨屏幕兼容。

固定宽度：把页面设置成320宽度。大屏幕手机两边会有空白。

viewport:以320宽度为基准，进行缩放，最大缩放为320*1.3=416。

如何计算出不同分辨率下font-size的值？

div article section标签区分？

http://www.jb51.net/html5/97873.html
div section article 三个标签语义是从无到有，逐渐增强。
section：有主题性的内容。
article：完整而独立存在的一段内容，其中一般会包含header\footer等。

手机移动端开发时各手机的尺寸
https://segmentfault.com/a/1190000000440934
http://www.mahaixiang.cn/ydseo/1228.html
http://hao.xueui.cn/size/ios_android_size.html

3.CSS3的animation动画和关键帧动画

animation动画使元素从一种样式逐渐变化成另一种样式。

CSS3的Animation有八个属性
animation-name ：动画名
animation-duration：时间
animation-delay：延时
animation-iteration-count：次数
animation-direction：方向
animation-play-state：控制
animation-fill-mode：状态

参数 @keyframes 设置动画样式,参照下列代码。

<style>
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
}
@keyframes myfirst     //定义动画名字，样式
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}
</style>

上述animation代码可写成

aniamtion: myfirst 5s linear 2s infinite alternate;

其中animation-timing-function还有一些特殊用途：

正常的animation动画是渐变、填充式动画。
若要变成逐帧动画，可利用steps(次数，状态）
第一个参数timing-function作用于每两个关键帧之间，而不是整个动画。
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

4.position–absolute/relative布局心得

http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html

absolute: 绝对布局，布局是相对于浏览器左上角，悬浮于整个页面之上。
relative: 相对于元素本身在文档中应该出现的位置来移动这个元素，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。