IT虾米网

移动端适配方案详解

admin 2018年05月27日 编程语言 169 0

介绍两种移动端适配方案

1. rem为主

  • 设置根节点字体大小,页面元素都使用scss表达式将px转换为rem

// 在scss中 
 
$mainSize:20px; 
html{font-size:$mainSize;} @function f($px){ 
  @return $px/$mainSize/2*1rem; 
}
  •  
  • 在页面进行缩放时更新根节点字体大小(设计稿640)

$(window).ready(function(){ 
    $('html').css({'font-size': $(window).width() / 320 *20}); 
}); 
$(window).resize(function(){ 
    $('html').css({'font-size': $(window).width() / 320 *20}); 
});

2. 通过js计算缩放比例控制适配(transform: scale(scale);),页面上最外层元素加上类名adapt

var adapt= { 
    styleRule: { 
        add: function(a, b) { var c = document.styleSheets[document.styleSheets.length - 1]; 
            c.cssRules ? c.insertRule(a + "{" + b + "}", c.cssRules.length) : c.addRule(a, b) 
        }, 
        remove: function(a) { for (var b = 0; b < document.styleSheets.length; b++) { var c = document.styleSheets[b]; 
                c.cssRules ? function() { for (var b = 0; b < c.cssRules.length; b++) c.cssRules[b].selectorText == a && c.deleteRule(b) 
                }() : c.removeRule(a) 
            } 
        } 
    }, 
    reset: function() { 
        adapt.styleRule.remove(".adapt") 
    }, 
    render: function(a) { function b() { 
            adapt.scale = e / 320; 
            adapt.styleRule.add(c, d.replace("{scale}", adapt.scale)); 
        } var c, d = "-webkit-transform:scale({scale});-webkit-transform-origin:0px 0px 0px;margin:0px;width:320px;"; 
        document.querySelectorAll(".adapt")[0] ? (c = ".adapt", d += "overflow:hidden;") : (console.warn(".adapt is undefined, open the default settings"), c = "body"); var e = window.innerWidth; 
        document.body.clientWidth <= window.innerWidth && (e = document.body.clientWidth), 
        a ? setTimeout(function() { 
            b() 
        }, 110) : b(); 
    }, 
    init: function() { var a = "onorientationchange" in window ? "orientationchange": "resize"; 
        window.addEventListener(a, function() { 
            adapt.render() 
        }); 
    } 
}; 
adapt.init(); 
adapt.render();

 3. 自执行方法

(function(win,doc){ 
    change(); function change(){ 
        doc.documentElement.style.fontSize = doc.documentElement.clientWidth *20/375+'px'; 
    } 
    win.addEventListener('resize',change,false); 
    win.addEventListener('orientationchange',change,false);  
})(window,document);

 

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

SQL:登录、连接数据库基本操作详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。