rem.js

根据设计尺寸制作rem适配
增加横屏判断

    (function(doc, win) {
        var ps_width = 375,
            ps_height = 667,
            rem = 50;
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function(e) {
              // alert(e.type)
                var w = window.innerWidth /*docEl.clientWidth*/ ;
                var h = window.innerHeight /*docEl.clientHeight*/ ;
                document.querySelector('.fixed').style.width =w+'px';

                if (!w)
                    return;
                if (w <= h ) {
                    //if(w>ps_width){w=ps_width;}
                    docEl.style.fontSize = rem * (w / ps_width) + 'px';
                    docEl.style.width = w+'px';
                    docEl.style.margin = 'auto';
                } else {
                    var w2 = ps_width*h/ps_height;
                    docEl.style.fontSize = rem * (w2 / ps_width) + 'px';
                    docEl.style.width = w2 + 'px';
                    docEl.style.margin = '0 ' + (w - w2) / 2 + 'px';
                    document.querySelector('.fixed').style.width = w2+'px';
                }
            };
        if (!doc.addEventListener)
            return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        recalc();
    })(document, window);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前言 对于熟悉pc端的小伙伴来说,对于静态页面的布局,一般都是没有什么问题的,为了保持各浏览器显示的一致性,无论是...
    itclanCoder阅读 14,645评论 5 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,251评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,667评论 4 61
  • 希望,是一个很好的心灵制剂。当我们在每一周/每一月/每一年,甚至每一天开始的时候,都会默默在心里升起一个小火苗,点...
    有花果的无花果阅读 1,468评论 0 0
  • 我们认识一年半,拍拖的时间加在一起有八个月。至今没有学会每天说晚安。可是,这对我来说好重要。我不希望当我晚上去找我...
    古缇阅读 5,126评论 0 1

友情链接更多精彩内容