试过很多办法,设为百分比的话,页面显示OK,但是字体什么的会有点异常,所以直接判断分辨率,通过transform:scale进行放大或缩小倍数的办法来实现不同分辨率的适配。
(function($) {
// 插件的定义
$.fn.scale = function(options) {
var obj = this;
var opts = $.extend({}, $.fn.scale.defaults, options);
init(obj, opts);
$(window).resize(function(event) {
init(obj, opts);
});
};
function init(obj, opts) {
var w = $(window).width();
var h = $(window).height();
var obj_w = obj.width() + opts.offset * 2;
if (w < opts.scale_w) {
var xScale = w / obj_w; //缩放比例
var yScale = xScale;
//缩放以及偏移
obj.css({
'transform': 'scale(' + xScale + ', ' + yScale + ')',
'transform-origin': '0px 0px',
/* IE 9 */
'-ms-transform': 'scale(' + xScale + ', ' + yScale + ')',
'-ms-transform-origin': '0px 0px',
/* Safari 和 Chrome */
'-webkit-transform': 'scale(' + xScale + ', ' + yScale + ')',
'-webkit-transform-origin': '0px 0px',
/* Firefox */
'-moz-transform': 'scale(' + xScale + ', ' + yScale + ')',
'-moz-transform-origin': '0px 0px',
/* Opera */
'-o-transform': 'scale(' + xScale + ', ' + yScale + ')',
'-o-transform-origin': '0px 0px'
});
} else {
obj.css({
'display': ' block',
'margin': '0 auto',
'transform': 'scale(1, 1)',
'transform-origin': '0px 0px',
/* IE 9 */
'-ms-transform': 'scale(1, 1)',
'-ms-transform-origin': '0px 0px',
/* Safari 和 Chrome */
'-webkit-transform': 'scale(1, 1)',
'-webkit-transform-origin': '0px 0px',
/* Firefox */
'-moz-transform': 'scale(1, 1)',
'-moz-transform-origin': '0px 0px',
/* Opera */
'-o-transform': 'scale(1, 1)',
'-o-transform-origin': '0px 0px'
});
}
}
// 插件的defaults
$.fn.scale.defaults = {
scale_w: 640, // 缩放标准宽度, 宽度小于此像素进行缩小
offset: 20 //对象padding偏差
};
// 闭包结束
})(jQuery);
调用方法:
var opts = {
scale_w: 3840 + 20 * 2, //缩放标准,屏幕小于此像素进行缩小
offset: 20
};
$(".test").scale(opts);