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

しかし、これらをどのように連鎖させるかわからないので、iveは||を使用してみました しかし、これはうまくいきませんでした

感謝するのを手伝ってください

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ほど読みやすくはありませんが、1つのターナリを別のターナリの中に貼り付けて、次のようにすることができます。

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