移动端布局基础

最近iphone7一下出了两款尺寸的手机，致使的移动端的屏幕种类更加的混乱，设计图以前以320*2为设计基准，如今通常以375*2为设计基准。javascript

另外各类品牌的android机混乱了市场，加上最近新出的win系统。css

解决之道

固定宽度作法

A:直接在header里写死<meta name="viewport" conent="width=375,user-scalable=no">，页面单位直接以px为基准html

优势：开发方便，设计图用ps量下直接就能够写上去单位html5

缺点：太多了，例如在小宽度手机上出现横向滚动屏，大手机上出现白边，1px像素处理等等java

响应式布局

A:用媒体查询语句在320,375为界限处进行适配处理android

          写法：@media only screen and (min-width: 750px) and (max-width: 640px) {
                          ...
                    }
                    @media and screen(max-width: 640px) {
                                    ....
                    }
                    @media and screen(min-width: 750px){
                            ...
                     }less

优势：页面处理稍微更精细些iphone

缺点：最多的缺点就是css查询语句写的比较多，且开发速度较慢布局

rem方案

本人使用过两种方式，都还不错字体

1.脚本动态计算

html {font-size: 50px;}
/* javascript */

!(function(win, doc){
    function setFontSize() {
        // 获取window 宽度
        // zepto实现 $(window).width()就是这么干的
        var winWidth =  window.innerWidth;
        // doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
        
        // 2016-01-13 订正
        // 640宽度以上进行限制 须要css进行配合
        var size = (winWidth / 640) * 100;
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
    }
 
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
    
    var timer = null;
 
    win.addEventListener(evt, function () {
        clearTimeout(timer);
 
        timer = setTimeout(setFontSize, 300);
    }, false);
    
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
 
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
 
    // 初始化
    setFontSize();
 
}(window, document));

2.用现成的flexible.js的解决方案，较推荐，毕竟是淘宝大厂的，能够参考大漠的文章

flexible.js: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html,另外就是使用的时候看状况须要改下js代码里的配置项，咱们是以750为设计基准的，折合最大7.5rem,有相同的只需改

这里，另外，须要注意的是字体大小建议使用px的方式，用less/scss中的mixin进行处理。

优势：太多

缺点：暂未发现

强大的单位——vw

html {
    font-size: 31.25vw; /* 表达式：100*100vw/320 */
}

兼容性问题比较大，没用过，没太多的发言权