我想要 1 个 480 像素的小屏幕图像，然后 2 个 580 像素的图像，然后 3 个 768 像素的图像，然后 4 个 980 像素的图像

Question

我想定义 4 个屏幕尺寸和 4 个变量值。我正在尝试如下。

if ($(window).width() > 789) {
  var cyx = 1;
}
if ($(window).width() < 780) {
  cyx = 2;
}
if ($(window).width() < 580) {
  cyx = 3;
}
if ($(window).width() < 480) {
  cyx = 4;
}

是否可以在 Javascript 中以更短的方式执行此操作？

谢谢。

Answer 1

var width = $(window).width();
var cyx;

if (width > 781) {
  cyx = 4;
} else if (width > 780) {
  cyx = 3;
} else if (width > 580) {
  cyx = 2;
} else if (width > 480) {
  cyx = 1;
}

这就是我会做这种逻辑的方式。您可以使用三元组“缩短”它，但它看起来很混乱。

Answer 2

我过去做过的另一种方法是在页面上包含一个高度为 0 的 div。我给它一个像#breakpoint 这样的ID。然后我在 CSS 样式表中为它设置了一个 z-index。例如：

#breakpoint { height:0; z-index:10; }
@media only screen and (min-width: 768px) {
    #breakpoint { z-index:5; }
}
@media only screen and (min-width: 1200px) {
    #breakpoint { z-index:1; }
}

然后，您只需测量 z-index 值。

var bp = parseInt($("#breakpoint").css('z-index'));
switch(bp){
    case 10:
        console.log("Is mobile");
        break;
    case 5:
        console.log("Is tablet");
        break;
    case 1:
        console.log("Is desktop");
        break;
}

这减少了窗口宽度的测量，您可以在 CSS 代码中调整断点，而不是在 JavaScript 代码中定义宽度。

Answer 3

你可以使用一些数学：

const cyx = [780, 580, 480].filter(el => el > $(window).width()).length + 1;

这不是问题中的代码所做的，但这是我假设你真正想要的。

例子：

console.log([780, 580, 480].filter(el => el > 800).length + 1);
console.log([780, 580, 480].filter(el => el > 700).length + 1);
console.log([780, 580, 480].filter(el => el > 500).length + 1);
console.log([780, 580, 480].filter(el => el > 400).length + 1);