怎样让移动端的网页内容自适应


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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。

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

table表格中的内容溢出应该如何处理

怎么实现获取textarea的动态剩余字数

html关于PHP你必须知道的重要知识点

以上就是怎样让移动端的网页内容自适应的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

如何使用iframe在当前网页中嵌入其他网页

css怎么实现内容超出隐藏效果

html文件中include文件内容应该如何使用

网页为什么会出现乱码?解决方法介绍

常用input文本框内容自动垂直居中并默认提示文字单击为空

css实现将网页变成黑白色

如何关闭javascript网页

最实用的制作网页小技巧总结

静态页面和动态页面区别

html中为网页设置字符集的标签是什么?

更多相关阅读请进入《适应》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...