Show different div, based on screen resolution [duplicate]

问题

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>

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.

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).

Any ideas please?

回答1:

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

A simple example of media queries are:

In the head of your html page you do:

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

And the divs with the content:

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

and

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

The css will look like this:

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

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

More about it HERE & HERE

回答2:

Try this:

get window size

var windowsize = $(window).width();
var num;

in a if-else or switch define as many conditions as you want and then assign the number of profiles for each condition to a variable

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

now use the variable for loading a certain number of profiles
- Note that check the conditions in window resize again.

来源：https://stackoverflow.com/questions/17213641/show-different-div-based-on-screen-resolution

标签

css

html

screen-resolution