Question

我正在设计一个约会网站的登陆页面，并且有一些代码可以调用“最新成员”，如下所示 -

CSS：

#wld_badge_wrapper { 
    border: 1px solid black; 
    width: 420px; 
    overflow: hidden; 
} 
#wld_badge_inner { 
    padding: 10px 0 10px 10px; 
} 
.wld_badge_item { 
    float: left; 
    margin: 0 10px 0 0;
    padding: 0; 
} 
.wld_badge_item img { 
    border: 1px solid black; 
} 
.wld_badge_item_detail { 
    margin-top: 5px;
    font-size: 75%;
    width: 90px; 
    overflow: hidden; 
} 
.wld_badge_clear { 
    clear: both; 
}

HTML：

<div id="wld_badge_wrapper">
    <div id="wld_badge_inner">
        <script type="text/javascript" src="http://s.wldcdn.net/api/badge/js/12415-6></script>
        <div class="wld_badge_clear" />
    </div>
</div>

上面的代码调出了6个配置文件，因此在src结尾处为-6。如果将其更改为“-2”，则仅调出2个配置文件等。

问题是，由于页面是响应的，你可以调用-2 div，如果屏幕尺寸是一个较小的分辨率，就像在手机上，或者它是在一个更大的分辨率，调用-6脚本和显示更多个人资料图片（所以页面上有两个版本的脚本，只显示相关的一个，隐藏一个不正确的脚本）。

有什么想法吗？

Answer 1

是的，这可以通过@media-queries轻松完成。

媒体查询的一个简单示例是：

在您的html页面的头部，您可以：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

包含内容的div：

<div class="visible-phone">
content for phone // in your case -2
</div>

和

<div class="visible-desktop">
content for desktop // in your case -6
</div>

css将如下所示：

.visible-phone{
@media (max-width: 480px) { more css }
}

.visible-desktop{
@media (min-width: 768px) { more css }
}

有关它的更多信息HERE＆amp; HERE

Answer 2

试试这个：

获取窗口大小

var windowsize = $（window）.width（）;
var num;

根据需要定义多个条件，然后将每个条件的配置文件数分配给变量

if（windowsize＆gt; 1024）{
          num = 6;
            } elseif（windowsize＆gt; 768＆amp;＆amp; windowsize＆lt; = 1024）{
              NUM = 4
            }

现在使用该变量加载一定数量的个人资料
- 请注意，请再次检查窗口中的条件。

根据屏幕分辨率显示不同的div

2 个答案: