列数的选项取决于屏幕分辨率

Options for the number of columns depends on screen resolution

本文关键字：屏幕 分辨率 取决于 选项      更新时间：2023-11-25

我正在尝试设置列数取决于屏幕分辨率的选项。（无列：4，）以下是用于调用函数来初始化插件的代码。

<script>
    jQuery(document).ready(function($) {
        $('#blog-landing').pinterest_grid({
            no_columns: 4,  
            padding_x: 0,
            padding_y: 0,
            margin_bottom: 0,
            single_column_breakpoint: 1010
        });
    });
</script>

我尝试使用这个代码：

 $(window).resize(function() {columns($(window).width());
if ($(window).width() < 1300) {
   no_columns = 4; } else {
 no_columns = 3; }});

但根本没有成功，有人能帮我实现这个代码吗。

您可能需要了解CSS媒体查询及其ECMAscript接口。你可以像一样使用它们

var mql = window.matchMedia("(min-width: 1300px)");
mql.addListener(function( obj ){
    if( obj.matches ) {
        no_columns = 4;
    } else {
        no_columns = 3;
    }
});
相关文章：