如何让单页面支持 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);
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值