如何编写手机端web应用

自己还没尝试，总结一下，下面这两种方案不错
http://www.jianshu.com/p/b00cd3506782
http://www.jianshu.com/p/e848fcc7e205
http://www.520ued.com/article/549125815f85b6b44ca20b2b

1.rem布局

1.引入js

**如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640) **

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白

2.其他元素就可以放心使用rem单位

那要是宽55px，高37px呢？然后经过换算，，设置如下 ↓

width: 2.75rem;
height: 1.85rem;

3.只有底部的导航不用rem，而是用的flex布局

其余的部分基本都是随着浏览器宽度变化在等比例缩放

4.最外层样式

所有的元素都可以写在这个div中了，于是就可以开始写样式了

position: relative;
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;

rem布局中，如果有个元素需要水平居中固定到页面底部

position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
max-width: 640px;
min-width: 320px;

---

二、rem布局实践应用

Paste_Image.png

1.在750设计稿上96px,所以我们要用96/(750/10)，得到对应的rem值。

.msg-header{
    position: relative;
    padding: 0 0.4rem;
    height: 1.28rem; //96/(750/10)
    line-height: 1.28rem;
    font-size: 0.48rem;
    text-align: center;
    border: 0.026667rem solid #eaeaea;
}

    

        
        消息
        清空全部
    



    

        

            
        
        

            
平台公告 2015-10-11
            
2015冬款上新2015冬款上新2015冬款上新
        
    
    

        

            
        
        

            
平台公告 2015-10-11
            
2015冬款上新2015冬款上新2015冬款上新
        
    

此处省略初始化的样式
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
.fl{
float: left;
}
.fr{
float: right;
}
.baseIcon{
display: inline-block;
background: url(bgIcon.png);
background-size:6.666667rem 6.666667rem;
}
.msg-header{
position: relative;
padding: 0 0.4rem;
height: 1.28rem;
line-height: 1.28rem;
font-size: 0.48rem;
text-align: center;
border: 0.026667rem solid #eaeaea;
}
.iconBack{
position: absolute;
top: 0.373333rem;
left:0.373333rem;
width: 0.346667rem;
height: 0.533333rem;
background-position: -1.493333rem -1.066667rem;
}
.msg-header .clear{
position: absolute;
right: 0.266667rem;
font-size: 0.4rem;
color: #666;
text-decoration: none;
}
.media-left,
.media-right{
display: table-cell;
vertical-align: top;
}
.media-right{
width: 100%;
border-bottom: 1px solid #eee;
}
.iconMsg{
width: 1.253333rem;
height: 1.253333rem;
background-position: -2.293333rem 0;
}
.media-left{
padding: 0.266667rem;
}
.msg-right{
padding: 0.266667rem;
}
.msg-right .title{
font-size: 0.426667rem;
color: #333;
}
.msg-right .date{
font-size: 0.293333rem;
color: #999;
font-weight: normal;
}
.msg-right .desc{
margin-top: 0.133333rem;
font-size: 0.346667rem;
color: #888;
}

Paste_Image.png

flexible会自动添加修改

---

其他方法

1.流式布局

流式布局的技术实现的，他们在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。
流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多的bug，还有就是对设计师的设计有很多的限制，因为他们在设计之初就需要考虑流式布局，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

2.固定宽度做法

还有一种是固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕下看起来页面会特别小，手机淘宝首页起初是这么做的，但近期改版了，可是天猫首页还没改版。

3.响应式做法

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样反而可以节约成本，不用再专门为自己的网站做一个web app的版本。

4.设置viewport进行缩放

天猫的web app的首页就是采用这种方式去做的，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到426都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效，不过有部分同学使用过程中反应缩放过程中有些糊，具体我使用没怎么遇到过这种情况。

兼容性

Paste_Image.png