liveapp场景应用，一般针对的是移动端，近来也是很火，颇有一些感受，拿来分享一下。
页面宽度范围：
一般移动端页面我们的像素范围是320px-640px，最大640px，最小320px，所以设计稿就是按照640px来做
布局方式：
流式布局，百分比布局和rem。
目前我用过的主要是这rem和流式布局
流式布局：
网页的主要架构部分按照百分比布局，宽度百分比，高度定死；
如果是图片宽度设置百分比，高度根据图片的比例自适应，如果是封面图片可以高度定死，用background-size:cover显示部分就行；
一些具体的内容直接用像素定宽高就行了，比如用户头像，一些按钮，一些比较固定的文字。
下面这个页面就是流式布局，分别是640和320情况下的样子，下面的页面不是场景应用，只是举例
流式布局一般偏向于文字展示的页面，对整个页面比例要求不那么高的。
专门说说rem布局：
rem就是偏向于图片较多，不出现滚动条的满屏页面，且高度还原设计图比例的情况，所以下面的例子是基于满屏页面的情况。
关于rem的具体介绍参考 腾讯的rem文章http://isux.tencent.com/web-app-rem.html
因为rem是根据html的字体像素确定它的值，也就是html{font-size:20px}时 1rem==20px。
总之我们可以用js获取到屏幕的宽高后，通过修改html的font-size来控制整个页面的大小，来达到完整并高度还原设计稿。
我们的宽度范围仍然是320-640，我们怎么定义html的字体像素范围呢。
我们需要用字体像素对应320-640，比如font-size为10px的时候对应320px，那么确定10px为最小的基数，那么对应关系就会如下：
| font-size | 1rem | 宽度 | 用rem表示宽度 |
| 10px | 10px | 320px | 32rem |
| 20px | 20px | 640px | 32rem |
但实际上我更喜欢这样：
| font-size | 1rem | 宽度 | 用rem表示宽度 |
| 20px | 20px | 320px | 16rem |
| 40px | 40px | 640px | 16rem |
因为低于12px在某些浏览器里是默认还是为12px，因此当我们给html设置font-size：10px的时候，这时还是12px，就会对布局造成影响。
所以一般我以20px作为基数对应320px。
还有比如iphone4里，在微信下浏览器的高度比较矮，这时我们为适应高度的还会把font-size设置到18px左右，这样才可能显示完整。
好现在，我们设置body的宽度为16rem，根据当前屏幕的宽度修改html的跟字体大小
如果屏幕宽度大于等于640px，我们就设置为40px，小于等于320px就设置为20px。
如果是在320,640之间，就用对应的rem去计算，比如20px为320px基数时候，rem最大的值是16rem，16就作为基数去除屏幕宽度，
比如当前屏幕宽度是400px，那么根字体大小就是 400/16=26px
以下是js resize：
window.onresize = function(){
resize();
}
function resize(){
//html:20px: 16rem 320px
//html:40px: 16rem 640px
var base = 16;//rem
var wid = $(window).width();
var hei = $(window).height();
if(hei < 460){//适应个别高度较矮的设备
$('html').css('font-size', '18px');
return;
}
if(wid < 320){
$('html').css('font-size', '20px');
return;
}
if(wid > 640){
$('html').css('font-size', '40px');
return;
}
$('html').css('font-size', wid/16 + 'px');//在320和640之间，除以16的基数，来算font-size
}
resize();
基于rem，我们几乎都可以用绝对定位，相对于body就行了。
比如我们的设计稿，设计稿是640px的，对应的最大的font-size：40
有一个按钮宽度是200px，高度是100px，相对于图片左边距是40px，相对于图片上边距是80px。
那么我们的css就应该这样写：
.button{
position: absolute;
width: 200/40rem;(5rem) // 200px/40px = 5rem
height: 100/40rem;(2.5rem)
left: 40/40rem;(1rem)
top: 80/40rem;(2rem)
}
如果我们的设计稿是320px，按钮宽高边距和上面一样，那么我们css就应该这样写：
.button{
position: absolute;
width: 200/20rem;(10rem) //200px/20px = 10rem
height: 100/20rem;(5rem)
left: 40/20rem;(2rem)
top: 80/20rem;(4rem)
}
这样布局起来会省很多事情。
百分比布局:
还有一种就是单纯的百分比布局，也是全部用绝对定位，和以上rem不同的就是，用的百分比作为宽高边距的单位，这种方式并不推荐，控制力不强。
以下是一些心得：
1.fastclick最好都要使用
2.基于微信开发的时候，微信缓存非常厉害哟，有一次改了几个小时代码一直不对，最后发现是微信缓存，有时候不得不去系统管理里关闭微信和微信缓存进程。
3.最好还是用构建工具，比如gulp、grunt
4.做一个通用的demo start，供下次使用，包括gulp等构建工具，常用的三方和自定义的less、css loading，js相关文件和三方库
5.写一个图片预加载，未加载完前显示css loading，加载完了再显示页面，
以下是预加载的代码，主要针对一些大图片做加载，因为一般主要的大点的图片加载完，页面都会加载完，这算是一种小技巧吧，实际的精度也不差：
//图片预加载
function preloader(images, cb){
i = 0;
var onComplete = function(e){
i++;
if(i == images.length){
cb && cb();
}
}
for(j in images) {
var img = new Image();
img.onload = img.onerror = onComplete;
img.src = images[j];
}
} var onImgLoaded = function(){
$(".loading").addClass("hide");
/*显示正式页面*/
} //使用
preloader(["/img/guide.png","/img/combine-list-bg.png","/img/frontpage-words.png","/img/frontpage-bg.png"], onImgLoaded);
6.弹框居中的方式，推荐用下面代码：
.tf-center{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}