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

前言

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

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

代码实现

<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>

插件的封装

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

  • 插件
 $.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);
        });
    }
});
  • 插件的调用
    先在html的头文件中调用此插件
    然后再js里面调用,调用的方法:
$.F_SIZE(960);//参数为你设计图的宽度
  • 页面中的计算及使用
    调用函数后,页面距离/字体大小的计算只需测量设计图的距离/字体的大小,再除以一百即可。(单位为“rem”)
    计算公式:设计图字体大小/100+“rem”(此处使用字体大小来举例子)

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

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

注:如果你使用的是zepto.js则使用第一种方法。

By : Yimi-shan

推荐阅读更多精彩内容