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);
}

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

3 个答案: