实现响应式布局

前言

之前说到响应式布局用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

也就是说我此处的font-size:.5rem