移动端自适应布局之道及解决方案

移动端布局基础

    最近iphone7一下出了两款尺寸的手机，导致的移动端的屏幕种类更加的混乱，设计图之前以320*2为设计基准，现在一般以375*2为设计基准。

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

解决之道

    固定宽度做法

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

        优点：开发方便，设计图用ps量下直接就可以写上去单位

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

    响应式布局

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

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

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

            缺点：最多的缺点就是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 */
}

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

总结：建议使用rem的解决方案，具体哪一种视情况而定。

            

        

        

转载于:https://my.oschina.net/u/3501238/blog/908821