Html 根据屏幕分辨率显示不同的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17213641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show different div, based on screen resolution
提问by user2505111
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:
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:
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.
上面的代码调用了 6 个配置文件，因此在 src 的末尾是 -6。如果将其更改为“-2”，则仅调用 2 个配置文件等。
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).
问题是，由于页面是响应式的，如果屏幕尺寸较小，例如在手机上，或者如果分辨率较大，请调用 -2 div 并调用 -6 脚本并显示更多配置文件图片？（所以页面上有两个版本的脚本，只显示相关的一个，隐藏不正确的一个）。
Any ideas please?
请问有什么想法吗？
回答by Kees Sonnema
Yes this could be done easily with @media-queries.
是的，这可以通过@media-queries.
A simple example of media queries are:
媒体查询的一个简单示例是：
In the head of your html page you do:
在您的 html 页面的头部，您执行以下操作：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And the divs with the content:
以及带有内容的 div：
<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:
css 将如下所示：
.visible-phone{
@media (max-width: 480px) { more css }
}
.visible-desktop{
@media (min-width: 768px) { more css }
}
回答by Reyraa
Try this:
尝试这个：
- get window size
- 获取窗口大小
var windowsize = $(window).width();
var num;
var windowsize = $(window).width();
变量号；
- 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-else 或 switch 中定义任意数量的条件，然后将每个条件的配置文件数量分配给变量
if (windowsize > 1024) {
num = 6;
}elseif (windowsize > 768 && windowsize <= 1024) {
num=4
}
如果（窗口大小> 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.
现在使用该变量加载一定数量的配置文件
- 请注意再次检查窗口调整大小中的条件。
