2

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

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脚本并显示更多配置文件图片？（所以页面上有两个版本的脚本，只显示相关的一个，隐藏不正确的一个）。

请问有什么想法吗？

4

2 回答 2

9

是的，这可以很容易地完成@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 }
}

更多关于这里和这里

于 2013-06-20T12:35:39.430 回答
4

尝试这个：

  1. 获取窗口大小

var windowssize = $(window).width();
变量编号；

  1. 在 if-else 或 switch 中定义任意数量的条件，然后将每个条件的配置文件数量分配给变量

if (windowsize > 1024) {
num = 6;
}elseif (windowsize > 768 && windowsize <= 1024) {
num=4
}

  1. 现在使用变量加载一定数量的配置文件

    • 请注意，再次检查窗口调整大小中的条件。
于 2013-06-20T12:40:59.160 回答