小编use*_*111的帖子

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

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

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; 
} 
Run Code Online (Sandbox Code Playgroud)

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> 
Run Code Online (Sandbox Code Playgroud)

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

问题是,由于页面响应,你可以调用-2 div,如果屏幕尺寸是一个较小的分辨率,如在手机上,或者如果它在更大的分辨率,请调用-6脚本并显示更多的配置文件图片?(所以页面上有两个版本的脚本,只显示相关的一个,隐藏一个不正确的脚本).

有什么想法吗?

html css screen-resolution

1
推荐指数
1
解决办法
3万
查看次数

标签 统计

css ×1

html ×1

screen-resolution ×1