最近在模仿做一个
点击打开链接这样的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;
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.雪碧图
对于使用雪碧图的元素,它的尺寸一定要尽量准确,不然在不同尺寸下会显示出其他的图像。
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
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.调用的时候实例化