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

移动端布局基础

    最近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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值