javascript - 使用 jquery 附加的样式元素

Question

我有附加到父 div 上的 div 元素。根据屏幕大小，div 元素应该调整大小，但我使用 jquery .css() 这样做的努力完全失败了。请帮忙。下面是我的代码示例

var len = data.length; //a number comes here
var i;
for(i=1;i<len+1;i++){
    $(".app-body").append(
       "<div class='list-box' onclick='OpenHymn("+ i +")'>" +
       "<div class='circle-text'><div class='hym_num'>" + i + "</div></div>" +
       "</div>");
}
//calling the function that should resize the divs
GridBoxes();

function GridBoxes(){
    var width=window.innerWidth;
    var divisible=parseInt(width-40);
    var size=divisible/4;
    var boxes=$('.list-box');
    boxes.css("width",size+"px");
    boxes.css("height",size+"px");

}

Answer 1

将函数放入 $(window).resize() 中，以便每次调整窗口大小时都会触发该函数

代码:

$(window).resize(function() {
  GridBoxes();
})

Example

您确实应该使用媒体查询来解决此类问题。