移动端网页大小自适应的实现方法

2020-04-16 21:23:31易采站长站整理

最终代码

JavaScript Code复制内容到剪贴板

Zepto(function($){   
    var win = window,   
        doc = document;   
  
    function setFontSize() {   
        var winWidth =  $(window).width();   
        // 640宽度以上进行限制   
        var size = (winWidth / 640) * 100;   
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + ‘px’ ;   
    };   
       
    //防止在html未加载完毕时执行,保证获取正确的页宽   
    setTimeout(function(){   
        // 初始化   
        setFontSize();   
           
    }, 200);   
    
});  

最后补充用rem做自适应过程中发现的一个坑--当html设置较大的fontsize时,块元素内的行内元素margin、padding会出现额外的值,解决办法是把外面包的块元素fontsize设置为0。

以上这篇移动端网页大小自适应的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

原文地址:http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522958.html