jquery - 根据屏幕大小调整 .resize 类的大小

Question

我有当前有效的代码

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame() 
{
var w = $(window).width();
$('.resize').css('width', (w <= 1680) ? 1680 : 1920);
}

但现在我需要添加其他屏幕尺寸，例如：

$('.resize').css('width', (w <= 1280) ? 1280 : 1920);
$('.resize').css('width', (w <= 1024) ? 1024 : 1920);

但我不确定如何将这些链接在一起，我尝试使用 || 但这没有用

帮助表示赞赏

Answer 1

function resizeFrame() {
  var height = $(window).height(),
      width  = $(window).width(),
      resizeWidth;

  if (width <= 1024) {
    resizeWidth = 1024;
  } else if (width <= 1280) {
    resizeWidth = 1280;
  } else if (width <= 1680) {
    resizeWidth = 1680;
  } else {
    resizeWidth = 1920;
  }

  $('.resize').css('width', resizeWidth);
}

Answer 2

$('.resize').css('width', function() {
  var width = 1920;
  if(w <= 1680 && w > 1280) {
    width = 1680;
  } else if(w <= 1280 && w > 1024) {
     width = 1280;
  } else if(w <= 1024) {
     width = 1024;
  }
  return width;
});

Answer 3

它不像 if/else 那样可读，但您可以将一个三元组插入另一个三元组，然后执行以下操作：

$(window).on('resize', function() {
    var w = $(this).width(),
        width = w <= 1024 ? 1024 : w <= 1280 ? 1280 : w <= 1680 ? 1680 : 1920;
    $('.resize').css('width', width);
}