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