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

响应式布局更加高效的方法:

代码实现

<script>
$(function() {
(function(){
var $html = $('html');
var $window = $('window');
var $body = $('body');
var psdsize =;//这里表示我设计图的宽度
var htmlfont = $body.width()/psdsize* + 'px';//计算字体大小
$html.css('font-size', htmlfont);//设置字体大小
$body.css('opacity', );//针对一些手机浏览器的默认样式
//屏幕尺寸修改时,改变其大小
$(window).resize(function(event) {
htmlfont = $body.width()/psdsize*+'px';
$html.css('font-size', 'htmlfont');
});
})();
});
</script>

插件的封装

<script>
$.extend({
F_SIZE:function(size){//使用传参的方式,以便灵活调用
var $html = $('html');
var $window = $('window');
var $body = $('body');
var psdsize = size;//这里表示我设计图的宽度
var htmlfont = $body.width()/psdsize* + 'px';//计算字体大小
$html.css('font-size', htmlfont);//设置字体大小
$body.css('opacity', );//针对一些手机浏览器的默认样式
//屏幕尺寸修改时,改变其大小
$(window).resize(function(event) {
htmlfont = $body.width()/psdsize* + 'px';
$html.css('font-size', htmlfont);
});
}
});
</script>
上一篇:Object-C类目(Category)


下一篇:H5输入框实时记录文字个数