如何让单页面支持 3840x2160分辨率的电视机,响应式布局

试过很多办法,设为百分比的话,页面显示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);

你可能感兴趣的:(css,javascript)