使用javascript创建媒体查询

我有一个javascript函数，可以在网站上显示新闻。目前，转盘上显示12个项目，每个转盘幻灯片上显示6个项目

当屏幕大小达到768px时，我想更改它，使每张幻灯片上只有3个项目。可以用javascript进行这样的媒体查询吗

在下面的代码中，“items”是文章总数，“breakpoint”是一张幻灯片上的金额。然后我使用additems函数来显示文章在页面上的显示方式

 $.fn.InitLatestNews = function(opts) {
        var config = $.extend({}, {
            'data' : [],
            'items' : 12,
            'breakpoint' : 6
        }, opts);

        var navIndex = 1;

        function AddItems(obj) {
            var htmlstring = '';
            var json = config.data;

            var itemNumber;
            if( config.items < json.length ) 
                itemNumber = config.items;
            else
                itemNumber = json.length;

            htmlstring += '<ul class="latestNews_list">';

            for( var i = 0; i < itemNumber; i++ ) {

                if ( i > 0 ) {
                    if( (i + 1) % config.breakpoint === 1 ) {
                        navIndex++;
                    }
                }

                if( navIndex === 1 )
                    htmlstring += '<li data-html="page-' + navIndex + '">';
                else
                    htmlstring += '<li class="hidden" data-html="page-' + navIndex + '">';

                htmlstring += '<div class="ln_image">';
                htmlstring += '<a href="' + json[i].url + '"></a>';
                if( json[i].imageUrl ) {
                    htmlstring += '<img class="ln_main_img" src="' + json[i].imageUrl + '" alt="' + json[i].title + '">';
                    htmlstring += '<div class="ln_read_overlay">';
                    htmlstring += '<div class="ln_overlay_inner">';
                    htmlstring += '<img src="/stylesheet/medway2014/magnifierglass.png">';
                    htmlstring += '<p>Read Article</p>';
                    htmlstring += '</div>';
                    htmlstring += '</div>';
                }
                htmlstring += '</div>';

                htmlstring += '<div class="ln_info">';
                htmlstring += '<a href="' + json[i].url + '"><h2>' + json[i].title + '</h2></a>';
                htmlstring += '<p>' + json[i].leader + '</p>';
                htmlstring += '</div>';

                htmlstring += '</li>';

            }

            htmlstring += '</ul>';

            obj.html(htmlstring);

        }

$.fn.InitLatestNews=函数（opts）{
var config=$.extend（{}{
“数据”：[]，
"项目":12,，
“断点”：6
}，opts）；
var navIndex=1；
功能附加项（obj）{
var htmlstring=''；
var json=config.data；
var项目编号；
if（config.items；
其他的
htmlstring+='
；
htmlstring+=''；
htmlstring+=''；
if（json[i].imageUrl）{
htmlstring+=''；
htmlstring+=''；
htmlstring+=''；
htmlstring+=''；
htmlstring+='阅读文章；
htmlstring+=''；
htmlstring+=''；
}
htmlstring+=''；
htmlstring+=''；
htmlstring+=''；
htmlstring+=''+json[i].leader+'
'；
htmlstring+=''；
htmlstring+='
'；
}
htmlstring+=''；
html（htmlstring）；
}

为什么要使用JavaScript

存在关注点分离是有原因的。JavaScript应该添加动态行为，但表示和样式属于CSS

你可以很容易地让你的代码保持原样，如果它目前正在工作，并使用CSS隐藏从第四个开始的每个元素

/* hide all news from the 4th onwards */
.latestNews_list li:nth-child(n+4)  {
  display: none;
}
@media screen and (min-width: 768px){
  .latestNews_list li:nth-child(n+4){
     display: list-item; /* or what ever was their display value before */
  }
}

---

我们无法从您的代码中看出什么，但请随意提供一个示例，我们可以看看您是否可以单独使用CSS来解决这个问题，而不会使您的JavaScript代码更难看。

为什么要使用JavaScript

存在关注点分离是有原因的。JavaScript应该添加动态行为，但表示和样式属于CSS

你可以很容易地让你的代码保持原样，如果它目前正在工作，并使用CSS隐藏从第四个开始的每个元素

/* hide all news from the 4th onwards */
.latestNews_list li:nth-child(n+4)  {
  display: none;
}
@media screen and (min-width: 768px){
  .latestNews_list li:nth-child(n+4){
     display: list-item; /* or what ever was their display value before */
  }
}

---

我们无法从您的代码中看出什么，但请随意提供一个示例，我们可以看看您是否可以单独使用CSS来解决这个问题，而不会使JavaScript代码更难看。

您是否尝试过使用CSS@media screen和（最小宽度：…）？您是否尝试过使用CSS@media screen和（最小宽度：…）？