根据屏幕分辨率显示不同的div [英] Show different div, based on screen resolution

问题描述

我正在设计一个约会网站的到达网页，并有一些代码呼叫「最新会员」，如下 -

I'm designing a landing page for a dating website, and have some code which calls in the 'latest members', which is as follows -

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> 

$ b b

上面的代码调用6个配置文件，因此在src结尾处有-6个，如果改为-2，它只调用2个配置文件等。

The above code calls up 6 profiles, hence the -6 at the end of the src. If this is changed to '-2', it only calls up 2 profiles, etc.

问题是，当页面响应时，你可以调用-2 div，如果屏幕尺寸是一个较小的分辨率，如在手机上，或者如果它是一个较大的分辨率，调用-6脚本并显示更多的配置文件图像？（因此在页面上有两个版本的脚本，只显示相关的一个，隐藏一个是不正确的）。

The question is, as the page is responsive, could you call the -2 div, if the screen size is a smaller resolution, like on a mobile phone, or if it's on a larger resolution, call the -6 script and show more profile images? (so have two versions of the script on the page, and only show the relevant one, hiding the one which is incorrect).

推荐答案

是的，可以使用 @ media-queries c $ c>。

Yes this could be done easily with @media-queries.

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

A simple example of media queries are:

您执行：

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

以及包含内容的div：

And the divs with the content:

<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 }
}

更多信息这里& 这里

More about it HERE & HERE

这篇关于根据屏幕分辨率显示不同的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！