用JS更好的实现响应式布局

发表于   |   分类于   |  

前言

之前说到响应式布局用rem来制作具有很高的效率，这次我们就继续来聊聊响应式布局更加高效的方法。
这是我朋友发给我的代码，我觉得这是一个很好的方法，于是在此记录下来。

这里将使用jQuery的方法来实现。（使用时请先引用jQuery包）

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$(function() {
    (function(){
        var $html = $('html');
        var $window = $('window');
        var $body = $('body');
        var psdsize =960;//这里表示我设计图的宽度
        var htmlfont = $body.width()/psdsize*100 + 'px';//计算字体大小
        $html.css('font-size', htmlfont);//设置字体大小
        $body.css('opacity', 1);//针对一些手机浏览器的默认样式
        //屏幕尺寸修改时，改变其大小
        $(window).resize(function(event) {
            htmlfont = $body.width()/psdsize*100+'px';
            $html.css('font-size', 'htmlfont');
        });
    })();
});
</script>

插件的封装

在这里，其实可以把这段代码封装成一个插件，每次使用响应式布局的时候来调用它就可以了，不需要每次都复制这一段代码。下面是修改的插件的代码，以及使用方法。

  • 插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
 $.extend({
    F_SIZE:function(size){//使用传参的方式，以便灵活调用
        var $html = $('html');
        var $window = $('window');
        var $body = $('body');
        var psdsize = size;//这里表示我设计图的宽度
        var htmlfont = $body.width()/psdsize*100 + 'px';//计算字体大小
        $html.css('font-size', htmlfont);//设置字体大小
        $body.css('opacity', 1);//针对一些手机浏览器的默认样式
        //屏幕尺寸修改时，改变其大小
        $(window).resize(function(event) {
            htmlfont = $body.width()/psdsize*100 + 'px';
            $html.css('font-size', htmlfont);
        });
    }
});
</script>

  • 插件的调用
    先在html的头文件中调用此插件
    然后再js里面调用，调用的方法：
    $.F_SIZE(960);//参数为你设计图的宽度

  • 页面中的计算及使用
    调用函数后，页面距离/字体大小的计算只需测量设计图的距离/字体的大小，再除以一百即可。（单位为“rem”）
    计算公式：设计图字体大小/100+“rem”（此处使用字体大小来举例子）

    假如我设计图的字体为50px，计算方式为：50/100=0.5rem
    也就是说我此处的font-size:.5rem

这种方式大大的提高工作效率，如果你有更好的方法，欢迎和我一起讨论！！！

By : Yimi-shan