Question

我在一个设置页面上大约有50个视频缩略图。

我想根据分辨率调整它们的大小。

我尝试过的是在CSS中使用@media查询，但查询未按预期工作，然后我转到了此。

$(document).ready(function(event) {
  var width = $(window).width();
  // Change thumbnail size if browser width changes (should be in real-time)   
  if (width <= 1300) {
    console.log(width);
    $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
  } else {
    $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
  }
});

在插入该脚本之后，视频缩略图的大小会发生变化，但是当我调整浏览器时，除非刷新页面，否则jQuery不会加载缩略图并调整缩略图的大小？

我不确定为什么随着大小（浏览器）的变化，jQuery无法实时加载脚本。

我在此项目中使用的语言：PHP，jQuery

Answer 1

您需要使用jQuery捕获窗口调整大小事件，并在其中编写代码。

$(window).resize(function() {
    var width = $(window).width();
    // Change thumbnail size if browser width changes (should be in real-time)   
    if (width <= 1300) {
        console.log(width);
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
});

要减少代码重复，您可以创建一个函数并在$(window).resize()和$(document).ready()中调用它

Answer 2

function onResize() {
    var width = $(window).width();
    if (width <= 1300) {
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
}

$(document).ready(onResize);

$(window).resize(onResize);

这应该可以，但是如果使用CSS完成，会更好。如果您想发布自己尝试过的内容，将很乐意为您提供帮助。如果您使用css进行操作，那么当js加载和更改这些类时，您将不会出现跳转页面的情况。

Answer 3

您可以这样做。

注意：这是未经测试的代码

function updateSizes(){
    var width = $(window).width();
    if (width <= 1300) {
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
}

$(document).ready(function(event) {
    updateSizes();
    // do other stuff here
});

$( window ).resize(function() {
    updateSizes();
    // do other stuff here
});

jQuery函数仅在页面刷新后加载

3 个答案: